Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

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

Wes Bos

444,369 subscribers

56,747 views • 2 years ago •via X (Twitter)

Science & Technology Education

Anya Rossi• Live Now

Private livecam show

11 Comments

Boyd ⚡️🧑‍💻🪄2 years ago

How!? How do I work with CSS every day of my life and completely miss well-supported things like this? The text-stroke property being centered rather than offset to the outside had made me write it off as useless. This completely fixes it. 🤯

Wes Bos2 years ago

Thats a great benefit I didn't even mention. Text stroke without the inset part!

Daniel Levi2 years ago

cool trick

goosewin2 years ago

pretty cool; looks like they're just re-implementing svg apis in css

Wes Bos2 years ago

yeah, it's actually a non-standard CSS property that every browser supports - a bit of an odd one

Harjaz —— ☪︎⚔︎𑁍⚡︎2 years ago

Awsome actually needed something like this

Jesse Walberg2 years ago

Are you just creative? How do you get inspiration for the designs you do?

Wes Bos2 years ago

Id say I'm fairly creative - always trying new things

Cam → bsky.app/profile/reactionlab.com2 years ago

Yes, for an outlined font if memory serves

Gilbert Matos | Nodejs/Nextjs/C#2 years ago

Wes, you're one hell of a chad! TY for the great content brother 🫂

Wes Bos2 years ago

🥰

Related Videos

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 😎

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 ✨

16,549 views • 2 years ago

🔥 CSS Tip! Have you ever wanted the benefits of a block element but the sizing of an inline element? width: max-content; comes in super handy here 👌

🔥 CSS Tip! Have you ever wanted the benefits of a block element but the sizing of an inline element? width: max-content; comes in super handy here 👌

Wes Bos

23,424 views • 2 years ago

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.

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,113 views • 2 years ago

lol used the wrong svg function. updated it so you can still set text color with css (and have transparent backgrounds)

lol used the wrong svg function. updated it so you can still set text color with css (and have transparent backgrounds)

Mark Hurrell

41,382 views • 3 months ago

working out at home is easy when u have ur gay wife handy to help motivate you :3

Sensitive content

working out at home is easy when u have ur gay wife handy to help motivate you :3

scar :3

15,979 views • 2 years ago

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 👇

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

409,026 views • 3 years ago

messin' with text using CSS + SVG 🤌

messin' with text using CSS + SVG 🤌

jhey ʕ•ᴥ•ʔ

85,634 views • 1 year ago

Made a lil data viewer node for the shader editor✨ Comes in handy when working with exact values!

Made a lil data viewer node for the shader editor✨ Comes in handy when working with exact values!

Nugget 🏳️‍🌈

19,737 views • 3 years ago

I bet you don't know about this CSS property.

I bet you don't know about this CSS property.

Pratham

94,485 views • 3 years ago

🎤: Have you ever compared it to yourself…like, if you were really broken up with in this way, what emotions would you use? WANMAEWNAM LOVE FOREVER #WhaleStorexoxoFinalEP #มิ้ลค์เลิฟ #MilkLove 💚: … 💖: We’ve never actually been angry/ sulky at each other before. 🎤: Ah, so there’s nothing you ever needed to clear up then. 💚: Normally, if anything comes up, we always talk it through. Especially when working, since we’ll be working together for a long time. So communication is really important.

🎤: Have you ever compared it to yourself…like, if you were really broken up with in this way, what emotions would you use? WANMAEWNAM LOVE FOREVER #WhaleStorexoxoFinalEP #มิ้ลค์เลิฟ #MilkLove 💚: … 💖: We’ve never actually been angry/ sulky at each other before. 🎤: Ah, so there’s nothing you ever needed to clear up then. 💚: Normally, if anything comes up, we always talk it through. Especially when working, since we’ll be working together for a long time. So communication is really important.

sᴀᴘᴘʜᴏʀɪᴀ 💫

17,863 views • 1 year ago

A little Clip Studio Paint trick for brushes: when you have a low density brush and you want to paint in several strokes and get steady colors, use the “compare density” blending mode for that brush. Here’s the difference between normal and compare density:

A little Clip Studio Paint trick for brushes: when you have a low density brush and you want to paint in several strokes and get steady colors, use the “compare density” blending mode for that brush. Here’s the difference between normal and compare density:

Inma R.🐥The Violinist and the Nerd.

1,867,309 views • 2 years ago

Why have matte paint, when you can have clean shiny paint?? No brainer don’t you think…?

Why have matte paint, when you can have clean shiny paint?? No brainer don’t you think…?

Theogcfu

254,828 views • 11 months ago

Suuuper handy new CSS: :user-invalid and :user-valid pseudo selectors let you style inputs only once they have been interacted with Just landed in Chrome + Safari, been in Firefox for years.

Suuuper handy new CSS: :user-invalid and :user-valid pseudo selectors let you style inputs only once they have been interacted with Just landed in Chrome + Safari, been in Firefox for years.

Wes Bos

177,429 views • 2 years ago

You can just text to buy things... Real shopper. Real order. Really Incremental.

You can just text to buy things... Real shopper. Real order. Really Incremental.

Jonathan Fudem

15,290 views • 1 year ago

squircles feels nice. it's my first time trying the experimental css `corner-shape` property. you can just use in css `corner-shape: squircle` to make the squircles. had enough fun working on this control panel component. note: this is only support on "chromium" for now.

squircles feels nice. it's my first time trying the experimental css `corner-shape` property. you can just use in css `corner-shape: squircle` to make the squircles. had enough fun working on this control panel component. note: this is only support on "chromium" for now.

Soren

97,796 views • 10 months ago

Bouncing bullets - handy when you don't have time to aim. #Saros

Bouncing bullets - handy when you don't have time to aim. #Saros

PlayStation UK

54,292 views • 7 months ago

Removing paint out of a paint brush using this handy tool

Removing paint out of a paint brush using this handy tool

lavanya anasera

2,471,355 views • 1 year ago

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.

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

text-wrap - CSS

text-wrap - CSS

Ali Reza

38,294 views • 2 years ago