Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

📌 Forget breakpoints! Use CSS clamp to size your text based on the viewport width. Sandbox + details below 👇

reactive_dude's profile picture

andrej

62,840 subscribers

211,109 Aufrufe • vor 3 Jahren •via X (Twitter)

KunstWissenschaft & TechnologieBildung
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

Seems like a good opportunity to share a trick I used on the React Aria website to make headings scale to fit the viewport on mobile, even with SSR. I used fontkit, a library I wrote 10 years ago to parse fonts and layout glyphs, to measure the width of the heading at build time in the "em" unit. width = font.layout('DateRangePicker').advanceWidth / font.unitsPerEm This is a size independent measurement using the font's internal metrics. When multiplied by any font size, you get the pixel width of the text. To calculate the font size, set this as a CSS variable and divide the target width (100vw minus padding). Clamp to make sure it doesn't get too big or small. font-size: clamp(35px, (100vw - 32px) / var(--text-width), 55px) And tada! You have perfectly scaling text no matter the viewport size. 🎉
0:15

Seems like a good opportunity to share a trick I used on the React Aria website to make headings scale to fit the viewport on mobile, even with SSR. I used fontkit, a library I wrote 10 years ago to parse fonts and layout glyphs, to measure the width of the heading at build time in the "em" unit. width = font.layout('DateRangePicker').advanceWidth / font.unitsPerEm This is a size independent measurement using the font's internal metrics. When multiplied by any font size, you get the pixel width of the text. To calculate the font size, set this as a CSS variable and divide the target width (100vw minus padding). Clamp to make sure it doesn't get too big or small. font-size: clamp(35px, (100vw - 32px) / var(--text-width), 55px) And tada! You have perfectly scaling text no matter the viewport size. 🎉

Devon Govett

48,276 Aufrufe • vor 3 Monaten

One line of CSS. Perfectly responsive typography on every screen. font-size: clamp(1rem, 1vw, 1.75rem); 🪄 1rem minimum keeps text readable on phones 🪄 1vw makes it scale fluidly with the viewport 🪄 1.75rem caps it elegantly on large displays No media queries or breakpoints. Try it!
0:11

One line of CSS. Perfectly responsive typography on every screen. font-size: clamp(1rem, 1vw, 1.75rem); 🪄 1rem minimum keeps text readable on phones 🪄 1vw makes it scale fluidly with the viewport 🪄 1.75rem caps it elegantly on large displays No media queries or breakpoints. Try it!

Kyrylo Silin

192,315 Aufrufe • vor 1 Monat

Introducing Customizable Responsive Breakpoints for Divi 5. 🥳 Divi 5 now comes with seven pre-defined breakpoints that cover every type of device, and you can customize the width of each breakpoint to control your design at every size. 👇
0:20

Introducing Customizable Responsive Breakpoints for Divi 5. 🥳 Divi 5 now comes with seven pre-defined breakpoints that cover every type of device, and you can customize the width of each breakpoint to control your design at every size. 👇

Elegant Themes

3,655,486 Aufrufe • vor 1 Jahr

A 🔥 browser extension every CSS developer must have. CSS Scan lets you extract the code for any CSS element of all the websites across the internet. Check out CSS Scan and click on the below link to get a 25% discount👇
0:12

A 🔥 browser extension every CSS developer must have. CSS Scan lets you extract the code for any CSS element of all the websites across the internet. Check out CSS Scan and click on the below link to get a 25% discount👇

Shefali

29,340 Aufrufe • vor 1 Jahr

Seedance 2.0 pro + Blender viewport style transfer below 👇
0:15

Seedance 2.0 pro + Blender viewport style transfer below 👇

TechHalla

195,844 Aufrufe • vor 11 Tagen

How i build with Claude👇 1. CSS blend-mode = text over photography in one line 2. GSAP ScrollTrigger = hero pins while content scrolls over it 3. Splitting.js = title arrives letter by letter on load 4. video autoplay muted = forest feels alive without user interaction 5. CSS clamp() = typography scales mobile to desktop zero media queries 6. linear-gradient overlay = text readable at any screen brightness Save this
0:16

How i build with Claude👇 1. CSS blend-mode = text over photography in one line 2. GSAP ScrollTrigger = hero pins while content scrolls over it 3. Splitting.js = title arrives letter by letter on load 4. video autoplay muted = forest feels alive without user interaction 5. CSS clamp() = typography scales mobile to desktop zero media queries 6. linear-gradient overlay = text readable at any screen brightness Save this

FHILY👑

31,844 Aufrufe • vor 1 Monat

Yes, you can optimize your viewport/render speed by reducing the maximum size of each texture #b3d
0:20

Yes, you can optimize your viewport/render speed by reducing the maximum size of each texture #b3d

Ilyasse L 🔸

31,936 Aufrufe • vor 1 Jahr

little details 👨‍🍳 tiny css transition-delay on :hover filters noise and captures intent .text { transition: grid-template-columns 0.2s var(--ease); } button:hover .text { grid-template-columns: 1fr; transition-delay: 0.1s; }
0:14

little details 👨‍🍳 tiny css transition-delay on :hover filters noise and captures intent .text { transition: grid-template-columns 0.2s var(--ease); } button:hover .text { grid-template-columns: 1fr; transition-delay: 0.1s; }

jhey ʕ•ᴥ•ʔ

59,207 Aufrufe • vor 7 Monaten

love the new ebay playbook docs 👏 always good to see fluid typography scaling in the wild details on how you can do it with CSS 👇
0:16

love the new ebay playbook docs 👏 always good to see fluid typography scaling in the wild details on how you can do it with CSS 👇

jhey ʕ•ᴥ•ʔ

98,083 Aufrufe • vor 1 Jahr

✂️ Achieve optical balance with CSS text-box-trim → Chrome 133 lets you tailor the space above and below text, giving developers and designers more control over text layout and appearance.
0:10

✂️ Achieve optical balance with CSS text-box-trim → Chrome 133 lets you tailor the space above and below text, giving developers and designers more control over text layout and appearance.

Chrome for Developers

124,703 Aufrufe • vor 1 Jahr

CSS Clamp function 🌟 -> clamp() is a function in CSS that provides a concise way for combining both the min() and max() functions. ⚠ Note: This can be achieved by this also - min(100px, max(50%, 200px))
0:15

CSS Clamp function 🌟 -> clamp() is a function in CSS that provides a concise way for combining both the min() and max() functions. ⚠ Note: This can be achieved by this also - min(100px, max(50%, 200px))

Prasenjit

78,754 Aufrufe • vor 1 Jahr

An awesome CSS trick is to use :hover on the container and :not(:hover) on the items that are not currently hovered to make more advanced effects 👇👨‍💻
0:12

An awesome CSS trick is to use :hover on the container and :not(:hover) on the items that are not currently hovered to make more advanced effects 👇👨‍💻

David Mráz

16,879 Aufrufe • vor 1 Jahr

CSS Tip! ✨ Did you know you can animate CSS Grid tracks? 👀 ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! 😎 CodePen.IO link below! 👇
0:18

CSS Tip! ✨ Did you know you can animate CSS Grid tracks? 👀 ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! 😎 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

30,561 Aufrufe • vor 3 Jahren

⚡️ CSS ::highlight() + TreeWalker for dynamic text search: - No DOM manipulation - Pure CSS ::highlight() styling - Efficient TreeWalker traversal [Code Snippet 👇]
0:18

⚡️ CSS ::highlight() + TreeWalker for dynamic text search: - No DOM manipulation - Pure CSS ::highlight() styling - Efficient TreeWalker traversal [Code Snippet 👇]

Bharat Kara

39,253 Aufrufe • vor 11 Monaten

Responsive magnetic link effect using CSS anchor positioning 🧲 nav li:nth-of-type(2) { anchor-name: --i2; } nav:has(li:nth-of-type(2) a:hover) { --a: --i2; } ul::before { /* indicator */ left: anchor(var(--a) left); width: anchor-size(var(--a) width); }
0:17

Responsive magnetic link effect using CSS anchor positioning 🧲 nav li:nth-of-type(2) { anchor-name: --i2; } nav:has(li:nth-of-type(2) a:hover) { --a: --i2; } ul::before { /* indicator */ left: anchor(var(--a) left); width: anchor-size(var(--a) width); }

jhey ʕ•ᴥ•ʔ

396,107 Aufrufe • vor 2 Jahren

✍️ New Article: Better fluid sizing with round() I wrote about how CSS round() enhances the values you get from clamp() in sizing, typography, and spacing. Why it matters, and how to use it. 🔗
0:17

✍️ New Article: Better fluid sizing with round() I wrote about how CSS round() enhances the values you get from clamp() in sizing, typography, and spacing. Why it matters, and how to use it. 🔗

Ahmad Shadeed

29,912 Aufrufe • vor 1 Monat

using css pow() you can create runtime-configurable fluid typography that responds to viewport or container size 😉 for example, "minimum of 14px at 375px and scale to maximum 24px at 1500px" all powered by pow() and custom properties
0:14

using css pow() you can create runtime-configurable fluid typography that responds to viewport or container size 😉 for example, "minimum of 14px at 375px and scale to maximum 24px at 1500px" all powered by pow() and custom properties

jhey ʕ•ᴥ•ʔ

117,763 Aufrufe • vor 1 Monat

Read with ease in the HBR mobile app using our new Article Text Size Selector, which gives you control over text size for a more comfortable, personalized reading experience. Go to Profile > Display Settings to adjust your preferred text size. Try it now.
0:15

Read with ease in the HBR mobile app using our new Article Text Size Selector, which gives you control over text size for a more comfortable, personalized reading experience. Go to Profile > Display Settings to adjust your preferred text size. Try it now.

Harvard Business Review

10,470 Aufrufe • vor 7 Tagen

Want some more sunshine to finish your weekend? You might be in luck🤞 Find out the details of the #4cast below👇
0:11

Want some more sunshine to finish your weekend? You might be in luck🤞 Find out the details of the #4cast below👇

Met Office

21,615 Aufrufe • vor 7 Monaten

Introducing Windfall - the 1st "Gaming based LST" built on Solana! Turbocharge your SOL holdings through gamified prize pools. Join the waitlist below👇 (1/6)
0:15

Introducing Windfall - the 1st "Gaming based LST" built on Solana! Turbocharge your SOL holdings through gamified prize pools. Join the waitlist below👇 (1/6)

Windfall

166,031 Aufrufe • vor 1 Jahr