Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Did you know about the CSS property 'text-wrap: balance'? It balances text distribution when wrapping, creating a harmonious layout. Now it's so easy to control the text 😎

viki_code's profile picture

Viki ✨

16,567 subscribers

16,549 Aufrufe • vor 2 Jahren •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

Achieve balanced text layouts in CSS with text-wrap: balance; This feature offers a more effective way to control text wrapping for improved readability and a more polished look. See examples and learn more →
0:58

Achieve balanced text layouts in CSS with text-wrap: balance; This feature offers a more effective way to control text wrapping for improved readability and a more polished look. See examples and learn more →

Chrome for Developers

20,593 Aufrufe • vor 1 Jahr

This is going to make fluid + responsive typography so much better! CSS text-wrap: balance; will evenly distribute your text on available lines.
0:44

This is going to make fluid + responsive typography so much better! CSS text-wrap: balance; will evenly distribute your text on available lines.

Wes Bos

92,293 Aufrufe • vor 3 Jahren

Have you ever needed the CSS paint-order property? Really handy when working with text-strokes!
1:24

Have you ever needed the CSS paint-order property? Really handy when working with text-strokes!

Wes Bos

56,690 Aufrufe • vor 1 Jahr

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.
0:25

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

jhey ʕ•ᴥ•ʔ

112,063 Aufrufe • vor 2 Jahren

there is something off about this design - it's the vertical text alignment this new CSS feature just made aligning text 100x easier
2:17

there is something off about this design - it's the vertical text alignment this new CSS feature just made aligning text 100x easier

Wes Bos

45,245 Aufrufe • vor 7 Monaten

Database: Text property now supports dual links One of the most requested features in 0.20 is here — dual links in the Text property. You can now mention and reference other files not only in the title row, but directly inside the Text field. This gives you greater flexibility when organizing and connecting your documents.
0:32

Database: Text property now supports dual links One of the most requested features in 0.20 is here — dual links in the Text property. You can now mention and reference other files not only in the title row, but directly inside the Text field. This gives you greater flexibility when organizing and connecting your documents.

Wax AI

48,478 Aufrufe • vor 6 Monaten

"I text KD. I was like, 'Dawg, how did you do it?' ... He literally text me: 'Bruh, you're better than me. It's easy for you.' Kevin Durant gave me the confidence to do that sh*t." - Michael Beasley
1:19

"I text KD. I was like, 'Dawg, how did you do it?' ... He literally text me: 'Bruh, you're better than me. It's easy for you.' Kevin Durant gave me the confidence to do that sh*t." - Michael Beasley

Club Shay Shay

278,170 Aufrufe • vor 4 Monaten

Future CSS Tip! 🔮 You can create responsive animated text reveals with CSS scroll-driven animations 🔥 section { /* The red element in the video */ view-timeline-name: --section; } p { animation: fill both linear; animation-timeline: --section; animation-range: cover; } keyframes fill { to { --fill: 1; } } No JavaScript required with this trick 😎 What's happening there then? Well, we're animating a custom property value using @ property. @ property --fill { initial-value: 0; syntax: ' '; inherits: true; } Then the trick is background clipping the text and filling it with a multiline background by animating the background-position to fill the text 🤓 span { background-position-x: calc(-100vmax + (var(--progress) * 100vmax)); background-clip: text; color: transparent; } CodePen.IO link below 👇
1:10

Future CSS Tip! 🔮 You can create responsive animated text reveals with CSS scroll-driven animations 🔥 section { /* The red element in the video */ view-timeline-name: --section; } p { animation: fill both linear; animation-timeline: --section; animation-range: cover; } keyframes fill { to { --fill: 1; } } No JavaScript required with this trick 😎 What's happening there then? Well, we're animating a custom property value using @ property. @ property --fill { initial-value: 0; syntax: ' '; inherits: true; } Then the trick is background clipping the text and filling it with a multiline background by animating the background-position to fill the text 🤓 span { background-position-x: calc(-100vmax + (var(--progress) * 100vmax)); background-clip: text; color: transparent; } CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

408,863 Aufrufe • vor 3 Jahren

You can now add text directly to videos using 𝕏’s built-in video editor. It’s so easy: 1) Upload a video 2) Tap the video to enter editing mode 3) Select the “Text Overlay” tool at the top Update the 𝕏 app and try it now.
0:24

You can now add text directly to videos using 𝕏’s built-in video editor. It’s so easy: 1) Upload a video 2) Tap the video to enter editing mode 3) Select the “Text Overlay” tool at the top Update the 𝕏 app and try it now.

DogeDesigner

53,983 Aufrufe • vor 15 Tagen

Okay so I did something. Drawn annotations that reflow with text as it re-shapes based on device, text size, wrapping, margins, etc. Still work to do- but damn. Content-retaining notes across devices, orientations, screen sizes, fonts, or text size.
0:57

Okay so I did something. Drawn annotations that reflow with text as it re-shapes based on device, text size, wrapping, margins, etc. Still work to do- but damn. Content-retaining notes across devices, orientations, screen sizes, fonts, or text size.

Astropulse

33,039 Aufrufe • vor 1 Monat

Jen McCabe tries to explain the most ridiculous text that nobody talks about: “Well get more info tomorrow, don’t wanna text about it” Why would Innocent people “not wanna text about it” ???
0:53

Jen McCabe tries to explain the most ridiculous text that nobody talks about: “Well get more info tomorrow, don’t wanna text about it” Why would Innocent people “not wanna text about it” ???

Joe TurtleHead

50,442 Aufrufe • vor 1 Jahr

adding randomized flavor text when the party eats food, cuz it was easy and fun to do.
0:32

adding randomized flavor text when the party eats food, cuz it was easy and fun to do.

a bottle of vinegar

13,595 Aufrufe • vor 1 Monat

CSS Tip! ✨ You can make your component styles portable with container queries 😎 Change a card layout based on size 🔥 Remove button text when it's small 🤏 .card {container-type: inline-size;} @ container (min-width: 50ch) {.info { grid-column: 2; }} CodePen.IO link below 👇
0:28

CSS Tip! ✨ You can make your component styles portable with container queries 😎 Change a card layout based on size 🔥 Remove button text when it's small 🤏 .card {container-type: inline-size;} @ container (min-width: 50ch) {.info { grid-column: 2; }} CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

311,583 Aufrufe • vor 3 Jahren

The open-source library of CSS text effects now contains 66 effects (+9 effects added). You can copy CSS to the clipboard or the AI prompt (ready for your AI tool).
0:30

The open-source library of CSS text effects now contains 66 effects (+9 effects added). You can copy CSS to the clipboard or the AI prompt (ready for your AI tool).

Csaba Kissi

24,172 Aufrufe • vor 1 Monat

When you illustrate urgency in prayer with a bathroom‑stall meltdown…making it evident you know nothing about the text OR prayer. And yet still they clap.
1:06

When you illustrate urgency in prayer with a bathroom‑stall meltdown…making it evident you know nothing about the text OR prayer. And yet still they clap.

Lloyd Legalist

25,973 Aufrufe • vor 3 Monaten

Future CSS Tip! 🍏 You can create that Apple style blow out text effect with CSS scroll-driven animations ⚡️ No JavaScript! The trick is to animate SVG text along the z-axis using 3D transforms 👀 .word { animation: blow-out both ease-in; animation-timeline: --section; 👈 animation-range: exit-crossing 10% exit 0%; } keyframes blow-out { to { transform: translate3d(0.05ch, 0, 99vh); } } The animation makes the text cover the viewport and blends into the next section which has the same background-color 🤙 The section is set to 200vh. But the wrapper around the SVG text defines perspective and transform-style .section__content { transform-style: preserve-3d; 👈 perspective: 100vh; } We're using an SVG to maintain the crispness of the text as it scales up ✨ Use these attributes on the within the SVG to align things 🤙 Your Name It's the last day of #AppleEvent week but I do have some more of these I'll put together next week 😉 CodePen.IO link below! 👇
0:32

Future CSS Tip! 🍏 You can create that Apple style blow out text effect with CSS scroll-driven animations ⚡️ No JavaScript! The trick is to animate SVG text along the z-axis using 3D transforms 👀 .word { animation: blow-out both ease-in; animation-timeline: --section; 👈 animation-range: exit-crossing 10% exit 0%; } keyframes blow-out { to { transform: translate3d(0.05ch, 0, 99vh); } } The animation makes the text cover the viewport and blends into the next section which has the same background-color 🤙 The section is set to 200vh. But the wrapper around the SVG text defines perspective and transform-style .section__content { transform-style: preserve-3d; 👈 perspective: 100vh; } We're using an SVG to maintain the crispness of the text as it scales up ✨ Use these attributes on the within the SVG to align things 🤙 Your Name It's the last day of #AppleEvent week but I do have some more of these I'll put together next week 😉 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

348,415 Aufrufe • vor 2 Jahren

"You texted Kyrie about a Cavs reunion. Did he text back?" Tristan Thompson: "Yeah, he put a heart emoji, so I know he read it.” (h/t ClutchPoints App)
0:46

"You texted Kyrie about a Cavs reunion. Did he text back?" Tristan Thompson: "Yeah, he put a heart emoji, so I know he read it.” (h/t ClutchPoints App)

Hoop Central

1,112,177 Aufrufe • vor 3 Jahren

More decks to go, but has designing beautiful slides been a pain point? Upgrades from our Presentation Agent PopAi enable prompt-based co-creation! Once you nailed the text content, leave the style design (300+ templates), layout, caption/text edits, chart and graphs to AI. Try now:
1:09

More decks to go, but has designing beautiful slides been a pain point? Upgrades from our Presentation Agent PopAi enable prompt-based co-creation! Once you nailed the text content, leave the style design (300+ templates), layout, caption/text edits, chart and graphs to AI. Try now:

Kai-Fu Lee

11,089 Aufrufe • vor 10 Monaten