Loading video...

Video Failed to Load

Go Home

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

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,349 subscribers

117,129 views • 1 month ago •via X (Twitter)

Science & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

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

191,159 views • 1 month ago

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 views • 1 year ago

– One HTML attribute – One JavaScript event listener – Configurable via CSS custom properties Let's get this explodin' 🤙
0:18

– One HTML attribute – One JavaScript event listener – Configurable via CSS custom properties Let's get this explodin' 🤙

jhey ʕ•ᴥ•ʔ

530,441 views • 2 years ago

Pow pow pow pow pow happy Tuesday and if this page starts to look different soon, something is coming!!!! #morecontent
0:10

Pow pow pow pow pow happy Tuesday and if this page starts to look different soon, something is coming!!!! #morecontent

ThinJen

488,521 views • 10 months ago

SMASHING that five star review 😉🍳🥞 #iHeartJingleBall2024 #Z100JingleBall #POW POW stopped by our @capitalone diner and I will 1000000% be returning 📹: MéShell Studio
0:13

SMASHING that five star review 😉🍳🥞 #iHeartJingleBall2024 #Z100JingleBall #POW POW stopped by our @capitalone diner and I will 1000000% be returning 📹: MéShell Studio

iHeartRadio

27,109 views • 1 year ago

Good news for web typography: text-indent with each-line and hanging keywords is now Baseline Widely Available → You can now create sophisticated, print-inspired layouts with CSS that work across all major engines.
0:15

Good news for web typography: text-indent with each-line and hanging keywords is now Baseline Widely Available → You can now create sophisticated, print-inspired layouts with CSS that work across all major engines.

Chrome for Developers

28,077 views • 2 months ago

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 views • 2 months ago

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔
0:11

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔

Surjith S M ✪

140,209 views • 3 years ago

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 ʕ•ᴥ•ʔ

97,677 views • 1 year ago

👤: Can i get a selfie? Princess of Wales: yes you can, very quickly! 👤: sorry! POW: it’s okay! 👤: I’m a little bit autistic, I’m really nervous. POW: please don’t be sorry, it’s okay! We all get nervous. 👤: that’s alright POW: well done. Nice to meet you, take care!
0:18

👤: Can i get a selfie? Princess of Wales: yes you can, very quickly! 👤: sorry! POW: it’s okay! 👤: I’m a little bit autistic, I’m really nervous. POW: please don’t be sorry, it’s okay! We all get nervous. 👤: that’s alright POW: well done. Nice to meet you, take care!

Isa💜

91,833 views • 3 years ago

POW POW POW POW POW POW POW POW POW POW POW POW
0:15

POW POW POW POW POW POW POW POW POW POW POW POW

Secretário Kim. 💖🐦‍⬛✨

106,297 views • 8 months ago

one trick behind this demo 👇🎞️ .images { translate: 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙
0:18

one trick behind this demo 👇🎞️ .images { translate: 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙

jhey ʕ•ᴥ•ʔ

46,527 views • 1 year ago

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);
0:10

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);

jhey ʕ•ᴥ•ʔ

77,042 views • 1 year ago

CSS shape() is now Baseline Newly Available → The shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().
0:11

CSS shape() is now Baseline Newly Available → The shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().

Chrome for Developers

24,796 views • 2 months ago

You can create custom profile pictures for your account, group or channel using animated stickers and emoji. Choose 'Set Emoji' when adding a profile photo to design your picture – with infinite combinations of emoji and backgrounds. #TelegramTips
0:12

You can create custom profile pictures for your account, group or channel using animated stickers and emoji. Choose 'Set Emoji' when adding a profile photo to design your picture – with infinite combinations of emoji and backgrounds. #TelegramTips

Telegram Messenger

106,928 views • 2 years ago

$POW LAUNCH TOMORROW FOLLOW POW POW 💥💥 JOIN WHALE WEDNESDAY FOR MORE INFO: $POW $POW 💥💥
0:15

$POW LAUNCH TOMORROW FOLLOW POW POW 💥💥 JOIN WHALE WEDNESDAY FOR MORE INFO: $POW $POW 💥💥

Catalina Whale Mixer

10,129 views • 1 year ago

✍️ 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,835 views • 1 month ago

The Grid and Snap To Grid are optional. You can adjust the position, rotation, tile size (scale), height and type (hex/square) of the grid. At any time.
0:11

The Grid and Snap To Grid are optional. You can adjust the position, rotation, tile size (scale), height and type (hex/square) of the grid. At any time.

Canvas of Kings | Might of Merchants

113,972 views • 1 year ago

soon you won't need inline custom properties to create staggered motion delays in CSS ✨ .char { transition-delay: calc( sin( ((sibling-index() - 1) / sibling-count()) * 45deg) * 0.5s ); }
0:18

soon you won't need inline custom properties to create staggered motion delays in CSS ✨ .char { transition-delay: calc( sin( ((sibling-index() - 1) / sibling-count()) * 45deg) * 0.5s ); }

jhey ʕ•ᴥ•ʔ

120,836 views • 1 year ago

POW💥POW💥POW💥POW💥POW💥POW💥POW💥
0:11

Sensitive content

POW💥POW💥POW💥POW💥POW💥POW💥POW💥

evelyn ♥︎

20,220 views • 7 months ago