Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

text always has weird extra space above capitals and below the baseline. one-line CSS fix: `text-box: trim-both cap alphabetic;` Perfectly trims the text box to the actual glyph bounds. No more padding hacks.

bossadizenith's profile picture

zenith

1,446 subscribers

73,650 görüntüleme • 3 ay önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

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

`scroll-padding-block` in a `textarea` so the text always has a gap with the bottom edge
0:14

`scroll-padding-block` in a `textarea` so the text always has a gap with the bottom edge

JohnPhamous

60,384 görüntüleme • 1 yıl önce

Want to run Deepseek R1 ? Text-generation-inference v3.1.0 is out and supports it out of the box. Both on AMD and Nvidia !
0:14

Want to run Deepseek R1 ? Text-generation-inference v3.1.0 is out and supports it out of the box. Both on AMD and Nvidia !

Nicolas Patry

28,859 görüntüleme • 1 yıl önce

5. Your typical auto-growing text area, accordion, multi-line text centering, pure canvas multiline text, and all other things that used be real CSS challenges, now reduced to a boring footnote
0:10

5. Your typical auto-growing text area, accordion, multi-line text centering, pure canvas multiline text, and all other things that used be real CSS challenges, now reduced to a boring footnote

Cheng Lou

319,398 görüntüleme • 3 ay önce

I’m trying out two different styles for object descriptions. 🔹 Left: black box, Disco Elysium style 🔹 Right: clean text, line animation Which one feels better for the game’s atmosphere? 🔍
0:14

I’m trying out two different styles for object descriptions. 🔹 Left: black box, Disco Elysium style 🔹 Right: clean text, line animation Which one feels better for the game’s atmosphere? 🔍

Marw

37,574 görüntüleme • 10 ay önce

glow with care 👨‍🍳 stack css drop-shadow() with increasing blur and saturation + brighten the text color one shadow ≠ glow
0:18

glow with care 👨‍🍳 stack css drop-shadow() with increasing blur and saturation + brighten the text color one shadow ≠ glow

jhey ʕ•ᴥ•ʔ

20,046 görüntüleme • 7 ay önce

The power of @ property Without it → CSS treats --progress as text → no animation With it → CSS knows it's percentage → smooth animation
0:13

The power of @ property Without it → CSS treats --progress as text → no animation With it → CSS knows it's percentage → smooth animation

Victor

20,744 görüntüleme • 1 ay önce

when aligning icons with text, you can set the height to 1lh it equals the element's line-height, so icons align perfectly
0:13

when aligning icons with text, you can set the height to 1lh it equals the element's line-height, so icons align perfectly

Ibelick

270,677 görüntüleme • 8 ay önce

I just wanted to subtly fix the text but made this instead 😂
0:11

I just wanted to subtly fix the text but made this instead 😂

かめりあ (Camellia)

53,195 görüntüleme • 1 yıl önce

[to the tune of happy birthday] text turns into speech text turns into speech the model is launching text turns into speech
0:15

[to the tune of happy birthday] text turns into speech text turns into speech the model is launching text turns into speech

fofr

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

Text me below for the on sale link 💚
0:18

Sensitive content

Text me below for the on sale link 💚

Leigh-Anne

28,858 görüntüleme • 1 yıl önce

Got rid of the text cuz it was annoying 😐…i need infold to sync their text and the dialogues pls
0:13

Got rid of the text cuz it was annoying 😐…i need infold to sync their text and the dialogues pls

Pia

596,249 görüntüleme • 1 yıl önce

Thinking about how this one line in Deltarune is to me the quintessential Toby Fox flavour text joke
0:14

Thinking about how this one line in Deltarune is to me the quintessential Toby Fox flavour text joke

Leon ._.

48,385 görüntüleme • 1 yıl önce

🔊 The Chat Completions API supports audio now. Pass text or audio inputs, then receive responses in text, audio, or both.
0:10

🔊 The Chat Completions API supports audio now. Pass text or audio inputs, then receive responses in text, audio, or both.

OpenAI Developers

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

192,023 görüntüleme • 1 ay önce

PowerPoint was launched in 1987. It took 38 years for someone to fix it. Now you can build entire decks, docs, and websites from one line of text... branded, animated & perfectly structured. Full demo + workflow: 🧵
0:14

PowerPoint was launched in 1987. It took 38 years for someone to fix it. Now you can build entire decks, docs, and websites from one line of text... branded, animated & perfectly structured. Full demo + workflow: 🧵

EyeingAI

32,126 görüntüleme • 8 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 • 3 ay önce

Save this for the next time your typography feels weird and you can’t explain why. Nine times out of ten, it’s line-height - the vertical space between lines of text that decides whether type feels confident or clumsy, readable or tiring. Headlines Compress them. ~1.05–1.25 is usually right. Headlines aren’t meant to be read carefully line by line. They’re meant to land as a shape. Tighter leading pulls words into a single visual block and makes the headline feel confident and intentional. One hard rule: ascenders and descenders should never touch. If your t’s and l’s are colliding with g’s and y’s, you’ve gone too far. Body text Do the opposite. Give it air. ~1.4–1.7, depending on the typeface, its x-height, and the line length. Body text is about endurance. Your reader shouldn’t notice the typography at all. If they’re aware of the type, something’s off. The goal is that they just keep going, paragraph after paragraph, without friction. In Framer, you can find the Line-height settings in the Text Panel > Line. And yes, this applies even if you’re using the same font for headlines and body text! Same font, same page, but they have completely different jobs - and different line height. Sometimes, choosing a good type isn’t enough - you need to know how much space to give letters so they can do their work.
0:18

Save this for the next time your typography feels weird and you can’t explain why. Nine times out of ten, it’s line-height - the vertical space between lines of text that decides whether type feels confident or clumsy, readable or tiring. Headlines Compress them. ~1.05–1.25 is usually right. Headlines aren’t meant to be read carefully line by line. They’re meant to land as a shape. Tighter leading pulls words into a single visual block and makes the headline feel confident and intentional. One hard rule: ascenders and descenders should never touch. If your t’s and l’s are colliding with g’s and y’s, you’ve gone too far. Body text Do the opposite. Give it air. ~1.4–1.7, depending on the typeface, its x-height, and the line length. Body text is about endurance. Your reader shouldn’t notice the typography at all. If they’re aware of the type, something’s off. The goal is that they just keep going, paragraph after paragraph, without friction. In Framer, you can find the Line-height settings in the Text Panel > Line. And yes, this applies even if you’re using the same font for headlines and body text! Same font, same page, but they have completely different jobs - and different line height. Sometimes, choosing a good type isn’t enough - you need to know how much space to give letters so they can do their work.

charlota

21,862 görüntüleme • 4 ay önce

One of the best text to video prompts to run! Prompt ⬇️
0:10

One of the best text to video prompts to run! Prompt ⬇️

Umesh

48,241 görüntüleme • 5 ay önce