Загрузка видео...

Не удалось загрузить видео

На главную

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

wesbos's profile picture

Wes Bos

434,108 subscribers

56,690 просмотров • 1 год назад •via X (Twitter)

Наука и технологииОбразование
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 11

Фото профиля Boyd ⚡️🧑‍💻🪄
Boyd ⚡️🧑‍💻🪄1 год назад

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 Bos
Wes Bos1 год назад

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

Фото профиля Daniel Levi
Daniel Levi1 год назад

cool trick

Фото профиля goosewin
goosewin1 год назад

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

Фото профиля Wes Bos
Wes Bos1 год назад

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

Фото профиля Harjaz —— ☪︎⚔︎𑁍⚡︎
Harjaz —— ☪︎⚔︎𑁍⚡︎1 год назад

Awsome actually needed something like this

Фото профиля Jesse Walberg
Jesse Walberg1 год назад

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

Фото профиля Wes Bos
Wes Bos1 год назад

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

Фото профиля Cam → bsky.app/profile/reactionlab.com
Cam → bsky.app/profile/reactionlab.com1 год назад

Yes, for an outlined font if memory serves

Фото профиля Gilbert Matos | Nodejs/Nextjs/C#
Gilbert Matos | Nodejs/Nextjs/C#1 год назад

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

Фото профиля Wes Bos
Wes Bos1 год назад

🥰

Похожие видео

🔥 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 👌
1:00

🔥 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 просмотров • 2 лет назад

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 просмотров • 2 лет назад

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

Sensitive content

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

scar :3

15,812 просмотров • 1 год назад

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,829 просмотров • 3 лет назад

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

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

Nugget 🏳️‍🌈

19,698 просмотров • 2 лет назад

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:
0:27

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,847,928 просмотров • 1 год назад

🎤: 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.
0:24

🎤: 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 просмотров • 11 месяцев назад

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

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

Theogcfu

254,828 просмотров • 8 месяцев назад

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.
1:19

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,397 просмотров • 2 лет назад

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

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

Jonathan Fudem

15,157 просмотров • 1 год назад

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

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

PlayStation UK

43,462 просмотров • 4 месяцев назад

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.
0:29

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 просмотров • 7 месяцев назад

You text when you have time. I text the second I see your message. That’s the difference between us.
0:58

You text when you have time. I text the second I see your message. That’s the difference between us.

♡

15,603 просмотров • 17 дней назад

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 просмотров • 5 месяцев назад

Did you really paint over peeling paint it just gave me OCD that I don’t have🤦‍♀️
0:28

Did you really paint over peeling paint it just gave me OCD that I don’t have🤦‍♀️

zaskiaaaa

2,419,636 просмотров • 7 месяцев назад

If you ever needed a reason to not own physical property in the UK and just buy Bitcoin. Here it is;
1:06

If you ever needed a reason to not own physical property in the UK and just buy Bitcoin. Here it is;

Scott Ellam

21,621 просмотров • 1 год назад

If you have the Holy Spirit, you have everything you ever needed. — Rev. Eastwood Anaba #Impact2025 #ArchbishopNick
1:20

If you have the Holy Spirit, you have everything you ever needed. — Rev. Eastwood Anaba #Impact2025 #ArchbishopNick

Nicholas Duncan-Williams

28,136 просмотров • 8 месяцев назад

Have you ever seen or tried a paint roller like this?
0:26

Have you ever seen or tried a paint roller like this?

Ayu D. Palupi

2,400,483 просмотров • 8 месяцев назад

Have you ever seen or tried a paint roller like this?
0:26

Have you ever seen or tried a paint roller like this?

princessay

1,206,821 просмотров • 5 месяцев назад

Phoebe Dynevor on working with Jonathan Bailey in Bridgerton: “I loved working with him so much and I feel like we both really do have the same approach to working where we can slip in and out of character quit easily, and really have a laugh when we’re not shooting.”
0:23

Phoebe Dynevor on working with Jonathan Bailey in Bridgerton: “I loved working with him so much and I feel like we both really do have the same approach to working where we can slip in and out of character quit easily, and really have a laugh when we’re not shooting.”

luis

11,580 просмотров • 4 месяцев назад