Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

reactive_dude's profile picture

andrej

62,686 subscribers

211,122 görüntüleme • 3 yıl önce •via X (Twitter)

SanatBilim & TeknolojiEğitim
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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 görüntüleme • 5 ay önce

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

193,045 görüntüleme • 4 ay önce

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 görüntüleme • 1 yıl önce

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👑

32,000 görüntüleme • 3 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

MiniMax H3 Anime Daily Routine Updated the old prompt. You can find the prompt in the replies. Reference character has glasses so I added a few details. Don't forget to update the prompt based on your character.
0:15

MiniMax H3 Anime Daily Routine Updated the old prompt. You can find the prompt in the replies. Reference character has glasses so I added a few details. Don't forget to update the prompt based on your character.

Kōda

41,269 görüntüleme • 1 ay önce

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,624 görüntüleme • 3 yıl önce

✍️ 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 görüntüleme • 4 ay önce

𝐊𝐚𝐫𝐦𝐚𝐂𝐚𝐫𝐝𝐬 𝐅𝐫𝐞𝐞 𝐌𝐢𝐧𝐭 𝐈𝐬 𝐋𝐈𝐕𝐄! 🔥 💳 4 Tiers. 1️⃣ 1 mint per wallet address. ⏰ 72 Hours. 💵 Your tier will be assigned based on your $KARMA balance at a snapshot taken shortly before the reveal on Monday Alpha. Access. KarmaCards. Mint details below 👇
0:13

𝐊𝐚𝐫𝐦𝐚𝐂𝐚𝐫𝐝𝐬 𝐅𝐫𝐞𝐞 𝐌𝐢𝐧𝐭 𝐈𝐬 𝐋𝐈𝐕𝐄! 🔥 💳 4 Tiers. 1️⃣ 1 mint per wallet address. ⏰ 72 Hours. 💵 Your tier will be assigned based on your $KARMA balance at a snapshot taken shortly before the reveal on Monday Alpha. Access. KarmaCards. Mint details below 👇

KARMACOIN ✨

118,336 görüntüleme • 2 yıl önce

Use geodes falloff on the whole character instead of going purely flat. #camkeys even passes viewport data to the GN so you don’t even need to use a camera.
0:18

Use geodes falloff on the whole character instead of going purely flat. #camkeys even passes viewport data to the GN so you don’t even need to use a camera.

Beyond Dev - Tyler Walker

98,876 görüntüleme • 2 ay önce

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 görüntüleme • 2 ay önce

What if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that! I wrote a new article where I continue exploring the experimental implementations of the latest specs.
0:16

What if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that! I wrote a new article where I continue exploring the experimental implementations of the latest specs.

Roma Komarov (inactive)

138,374 görüntüleme • 3 yıl önce

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,198 görüntüleme • 2 yıl önce

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇
0:14

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

182,620 görüntüleme • 3 yıl önce

Jordan 4 “Thunder” Men's Sizes 9-14 ($210) (No 9.5) Post a VIDEO of a shoe YOUR size Somewhere PHYSICALLY in the video have your MENS shoe size and the answer to the question written Show us your size tag or sticker (Example Shown) Post it below 👇
0:16

Jordan 4 “Thunder” Men's Sizes 9-14 ($210) (No 9.5) Post a VIDEO of a shoe YOUR size Somewhere PHYSICALLY in the video have your MENS shoe size and the answer to the question written Show us your size tag or sticker (Example Shown) Post it below 👇

better+

49,801 görüntüleme • 3 yıl önce

Jordan 4 “Red Cement” Men's Sizes 8-14 ($210) Post a VIDEO of a shoe YOUR size Somewhere PHYSICALLY in the video have your MENS shoe size and the ANSWER to the question written Show us your size tag or sticker (Example Shown) Post it below 👇
0:14

Jordan 4 “Red Cement” Men's Sizes 8-14 ($210) Post a VIDEO of a shoe YOUR size Somewhere PHYSICALLY in the video have your MENS shoe size and the ANSWER to the question written Show us your size tag or sticker (Example Shown) Post it below 👇

better+

40,348 görüntüleme • 3 yıl önce