Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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,397 subscribers

118,288 görüntüleme • 5 ay önce •via X (Twitter)

Bilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

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 • 5 ay önce

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

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

495,063 görüntüleme • 1 yıl önce

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

531,183 görüntüleme • 2 yıl önce

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

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 • 7 ay önce

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

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

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. 🦊🐦‍⬛✨

114,595 görüntüleme • 1 yıl önce

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

POW POW POW 😉💃🏾💥 #fyp #dance #foryou #follow #dance #explore #reels #trend #ootd #likes #views
0:10

POW POW POW 😉💃🏾💥 #fyp #dance #foryou #follow #dance #explore #reels #trend #ootd #likes #views

itz.leen2bean♡

13,547 görüntüleme • 1 ay önce

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

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

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

78,350 görüntüleme • 1 yıl önce

a well-known iOS Safari quirk is that inputs with a font-size <16px trigger an auto-zoom on focus using 16px is probably the best solution, but it can feel a bit heavy in tight UIs a clever workaround is to keep the font-size at 16px and scale the input down with CSS!
0:17

a well-known iOS Safari quirk is that inputs with a font-size <16px trigger an auto-zoom on focus using 16px is probably the best solution, but it can feel a bit heavy in tight UIs a clever workaround is to keep the font-size at 16px and scale the input down with CSS!

daniel petho

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

💡 CSS Tip! Create a Sticky Header that "sticks"! A fancy effect powered by Scroll-Driven Animations and shape().
0:10

💡 CSS Tip! Create a Sticky Header that "sticks"! A fancy effect powered by Scroll-Driven Animations and shape().

CSS by T. Afif

22,524 görüntüleme • 6 ay önce