Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

raunofreiberg's profile picture

rauno

89,805 subscribers

31,639 Aufrufe • vor 1 Jahr •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

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

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

MATLAB

23,708 Aufrufe • vor 1 Jahr

the writer and animators got completely carried away in this scene
0:19

the writer and animators got completely carried away in this scene

nath :3

127,280 Aufrufe • vor 1 Jahr

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

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

Ron Filipkowski

6,045,865 Aufrufe • vor 2 Jahren

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,866 Aufrufe • vor 4 Monaten

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;
0:13

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 Aufrufe • vor 3 Monaten

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! 👇
0:14

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 Aufrufe • vor 3 Jahren

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

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

internet hall of fame

1,021,142 Aufrufe • vor 5 Monaten

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

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 Aufrufe • vor 3 Jahren

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

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 Aufrufe • vor 1 Jahr

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 😉
0:12

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 Aufrufe • vor 3 Jahren

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. ❤️
0:19

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 Aufrufe • vor 4 Monaten

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;
0:10

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 Aufrufe • vor 2 Monaten

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

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 Aufrufe • vor 5 Monaten

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

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 Aufrufe • vor 2 Jahren

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);" )
0:10

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 Aufrufe • vor 1 Jahr

(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💔💔💔
0:11

(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 Aufrufe • vor 1 Jahr

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

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

MotoGP™🏁

87,188 Aufrufe • vor 1 Jahr