正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

Got carried away with this interactive module for breaking down the CSS mask-image property

rauno

89,805 subscribers

31,639 次观看 • 1 年前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

Learn the fundamentals of #derivatives including the product and chain rule in this interactive module!

Learn the fundamentals of #derivatives including the product and chain rule in this interactive module!

MATLAB

23,708 次观看 • 1 年前

the writer and animators got completely carried away in this scene

the writer and animators got completely carried away in this scene

nath :3

127,280 次观看 • 1 年前

Gaetz got a little carried away with the Botox before his big speech.

Gaetz got a little carried away with the Botox before his big speech.

Ron Filipkowski

6,045,865 次观看 • 2 年前

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

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

Victor

20,866 次观看 • 4 个月前

if you’re dynamically masking a scroll container with css, consider leaving room for the scrollbar instead of masking it too 🧑‍🍳 mask-repeat: no-repeat; mask-size: calc(100% - 10px) 100px;

if you’re dynamically masking a scroll container with css, consider leaving room for the scrollbar instead of masking it too 🧑‍🍳 mask-repeat: no-repeat; mask-size: calc(100% - 10px) 100px;

jhey ʕ•ᴥ•ʔ

213,001 次观看 • 3 个月前

Future CSS Tip! 🤞 You could create an image zoom/crop using the CSS object-view-box property 🔍 img { object-fit: cover; object-view-box: inset( var(--top) var(--right) var(--bottom) var(--left) ); } CodePen.IO link below! 👇

Future CSS Tip! 🤞 You could create an image zoom/crop using the CSS object-view-box property 🔍 img { object-fit: cover; object-view-box: inset( var(--top) var(--right) var(--bottom) var(--left) ); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

168,050 次观看 • 3 年前

When Lewis Hamilton got a little bit too carried away with his enthusiasm...

When Lewis Hamilton got a little bit too carried away with his enthusiasm...

internet hall of fame

1,021,142 次观看 • 5 个月前

He’s been getting away with pulling the driving player down with his arm all series. He got whistled for it the entire year. This is 100 out 100 times a foul.

He’s been getting away with pulling the driving player down with his arm all series. He got whistled for it the entire year. This is 100 out 100 times a foul.

Letting Go

503,776 次观看 • 3 年前

A fun CSS-only experimentation using modern features (anchor positioning, @property, :has(), and more!) for this week #codepenchallenge Demo: via CodePen.IO

A fun CSS-only experimentation using modern features (anchor positioning, @property, :has(), and more!) for this week #codepenchallenge Demo: via CodePen.IO

CSS by T. Afif

12,160 次观看 • 1 年前

Tailwind CSS Tip (24/30) ✨ You can create a transparent text effect in Tailwind CSS using (•••••••••••) Guess the CSS Property. You can use this Play Link as a starter: Answer will be shared later today 😉

Tailwind CSS Tip (24/30) ✨ You can create a transparent text effect in Tailwind CSS using (•••••••••••) Guess the CSS Property. You can use this Play Link as a starter: Answer will be shared later today 😉

Surjith S M ✪

45,134 次观看 • 3 年前

This one CSS property will fix your z-index headache. In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️

This one CSS property will fix your z-index headache. In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️

Ali

16,738 次观看 • 4 个月前

Design Engineering Tip: One CSS property is responsible for most ugly expand animations. It’s height: auto. Replace it with: grid-template-rows: 0fr → 1fr;

Design Engineering Tip: One CSS property is responsible for most ugly expand animations. It’s height: auto. Replace it with: grid-template-rows: 0fr → 1fr;

Gabriel

110,624 次观看 • 2 个月前

Smooth Edges for Marquees with CSS Mask 𝚖𝚊𝚜𝚔-𝚕-𝚏𝚛𝚘𝚖-𝟾𝟶% 𝚖𝚊𝚜𝚔-𝚛-𝚏𝚛𝚘𝚖-𝟾𝟶% Can be used on card skeletons, marquees, or anywhere you want to smooth out the edges.

Smooth Edges for Marquees with CSS Mask 𝚖𝚊𝚜𝚔-𝚕-𝚏𝚛𝚘𝚖-𝟾𝟶% 𝚖𝚊𝚜𝚔-𝚛-𝚏𝚛𝚘𝚖-𝟾𝟶% Can be used on card skeletons, marquees, or anywhere you want to smooth out the edges.

Manu Arora

58,395 次观看 • 5 个月前

Deployed the first Tailwind CSS v4-powered website to the internet this afternoon 🥳 Native cascade layers, `@property` definitions, `color-mix()`, and variables galore 🤩

Deployed the first Tailwind CSS v4-powered website to the internet this afternoon 🥳 Native cascade layers, `@property` definitions, `color-mix()`, and variables galore 🤩

Adam Wathan

91,538 次观看 • 2 年前

an alternative approach to console animation that doesn't hijack the console 1. inline CSS animation into an SVG 2. style console message with background-image 3. use SVG as the background-image 🚀 console.info( "%ccome cook", "background-image: url(/animated.svg);" )

an alternative approach to console animation that doesn't hijack the console 1. inline CSS animation into an SVG 2. style console message with background-image 3. use SVG as the background-image 🚀 console.info( "%ccome cook", "background-image: url(/animated.svg);" )

jhey ʕ•ᴥ•ʔ

93,420 次观看 • 1 年前

(still wip) #pjegtwt sorry pjeg moots i got carried away with this part..the new imitation art got me TWEAKING OUT . LET THESE PEOPLE LIVE HAPPY AND FULFILLING LIVES LOOK HOW HAPPY THEY ALL CAN BE💔💔💔

(still wip) #pjegtwt sorry pjeg moots i got carried away with this part..the new imitation art got me TWEAKING OUT . LET THESE PEOPLE LIVE HAPPY AND FULFILLING LIVES LOOK HOW HAPPY THEY ALL CAN BE💔💔💔

CC009🇺🇦comms open!

28,513 次观看 • 1 年前

Getting a little carried away with the celebrations here 😱😅 #SanMarinoGP 🇸🇲

Getting a little carried away with the celebrations here 😱😅 #SanMarinoGP 🇸🇲

MotoGP™🏁

87,188 次观看 • 1 年前