Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

messin' with css frosted + saturated borders using background-clip + backdrop-filter 👨‍🍳

jhey ʕ•ᴥ•ʔ

146,391 subscribers

158,295 Aufrufe • vor 10 Monaten •via X (Twitter)

Kunst Bildung Wissenschaft & Technologie

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

backdrop-filter + svg-filter #css

backdrop-filter + svg-filter #css

Kitasenju Design

24,056 Aufrufe • vor 2 Jahren

The Popover API puts your UI on a separate top layer so you can stop fighting with focus management. Plus backdrop styling so short it fits here: [popover]::backdrop { background: rgb(52, 168, 83); backdrop-filter: blur(3px); } Build more with less code→

The Popover API puts your UI on a separate top layer so you can stop fighting with focus management. Plus backdrop styling so short it fits here: [popover]::backdrop { background: rgb(52, 168, 83); backdrop-filter: blur(3px); } Build more with less code→

Chrome for Developers

41,345 Aufrufe • vor 9 Monaten

quantity picker w/ [type=number] 👨‍🍳 quantity-picker:has(input:invalid):not(:focus-within) { animation: shake; background: hsl(0 100% 50% / 0.14); } aim to guide, not distract, using form control validation css 🤙 (cooler detail is how the num track works though 👀)

quantity picker w/ [type=number] 👨‍🍳 quantity-picker:has(input:invalid):not(:focus-within) { animation: shake; background: hsl(0 100% 50% / 0.14); } aim to guide, not distract, using form control validation css 🤙 (cooler detail is how the num track works though 👀)

jhey ʕ•ᴥ•ʔ

46,790 Aufrufe • vor 8 Monaten

Need a gradient border? Use CSS background-clip 🤙 input { background: linear-gradient(canvas, canvas), linear-gradient(120deg, hsl(278, 44%, 73%), hsl(35, 81%, 73%) ); border: 4px solid transparent; background-clip: padding-box, border-box; }

Need a gradient border? Use CSS background-clip 🤙 input { background: linear-gradient(canvas, canvas), linear-gradient(120deg, hsl(278, 44%, 73%), hsl(35, 81%, 73%) ); border: 4px solid transparent; background-clip: padding-box, border-box; }

jhey ʕ•ᴥ•ʔ

82,458 Aufrufe • vor 2 Jahren

the trick to this css card glow/shine effect is blurring a duplicated layer that moves around 👨‍🍳 the og post mentions feGaussianBlur but you can use css filter blur too (there's a toggle 👇) filter: blur(28px) saturate(5) brightness(1.3) jus' need to test what plays best!

the trick to this css card glow/shine effect is blurring a duplicated layer that moves around 👨‍🍳 the og post mentions feGaussianBlur but you can use css filter blur too (there's a toggle 👇) filter: blur(28px) saturate(5) brightness(1.3) jus' need to test what plays best!

jhey ʕ•ᴥ•ʔ

103,816 Aufrufe • vor 6 Monaten

glow with care 👨‍🍳 stack css drop-shadow() with increasing blur and saturation + brighten the text color one shadow ≠ glow

glow with care 👨‍🍳 stack css drop-shadow() with increasing blur and saturation + brighten the text color one shadow ≠ glow

jhey ʕ•ᴥ•ʔ

20,046 Aufrufe • vor 9 Monaten

💡CSS techniques: "The Backlight" Using a blur filter you can create an elegant backlight (or a "smart shadow") effect for your images. In a pseudo-element: 1⃣ `inherit` a background 2️⃣ blur it 3⃣ put it behind the main element using z-index Here's how it works:

💡CSS techniques: "The Backlight" Using a blur filter you can create an elegant backlight (or a "smart shadow") effect for your images. In a pseudo-element: 1⃣ `inherit` a background 2️⃣ blur it 3⃣ put it behind the main element using z-index Here's how it works:

bolt.new

369,448 Aufrufe • vor 1 Jahr

By combining the SVG bloom filter I made with CSS animations, I can create this glowing effect with pure CSS! The web platform has so much to uncover 👀✨

By combining the SVG bloom filter I made with CSS animations, I can create this glowing effect with pure CSS! The web platform has so much to uncover 👀✨

Kevin Grajeda

29,161 Aufrufe • vor 1 Jahr

one way w/ css 🪄 stack an image 2x filter 1st, unclip 2nd on :hover 🤙 a img { grid-area: 1 / 1; } img:first-of-type { filter: grayscale(1) invert(1); } img:last-of-type { clip-path: circle(0); transition: clip-path; } a:hover img:last-of-type { clip-path: circle(100%); }

one way w/ css 🪄 stack an image 2x filter 1st, unclip 2nd on :hover 🤙 a img { grid-area: 1 / 1; } img:first-of-type { filter: grayscale(1) invert(1); } img:last-of-type { clip-path: circle(0); transition: clip-path; } a:hover img:last-of-type { clip-path: circle(100%); }

jhey ʕ•ᴥ•ʔ

325,698 Aufrufe • vor 7 Monaten

reminder that you can also create lighting effects with a little css + svg filters <feSpecularLighting> + <fePointLight> bound to pointer position 👨‍🍳

reminder that you can also create lighting effects with a little css + svg filters <feSpecularLighting> + <fePointLight> bound to pointer position 👨‍🍳

jhey ʕ•ᴥ•ʔ

103,336 Aufrufe • vor 3 Monaten

💡 Do you know about the `clip` value? In CSS, we can clip a container along a single axis by using the `clip` value. Learn more in this interactive article about the `clip` value:

💡 Do you know about the `clip` value? In CSS, we can clip a container along a single axis by using the `clip` value. Learn more in this interactive article about the `clip` value:

Ahmad Shadeed

10,533 Aufrufe • vor 1 Jahr

That SVG filter is the whole reason this CSS scroll animation is even possible 🙏 (now with improved timing ✨)

That SVG filter is the whole reason this CSS scroll animation is even possible 🙏 (now with improved timing ✨)

jhey ʕ•ᴥ•ʔ

94,093 Aufrufe • vor 2 Jahren

Create responsive footer with subscribe form using CSS and HTML 🚀 Code in the comments 🧑‍💻

Create responsive footer with subscribe form using CSS and HTML 🚀 Code in the comments 🧑‍💻

David Mráz

78,635 Aufrufe • vor 2 Jahren

Responsive table with resizable columns using HTML, CSS and JavaScript 🚀 Code in the comments 🧑‍💻

Responsive table with resizable columns using HTML, CSS and JavaScript 🚀 Code in the comments 🧑‍💻

David Mráz

13,821 Aufrufe • vor 8 Monaten

Women using the 'man' filter, best with sound. 😂

Women using the 'man' filter, best with sound. 😂

The Figen

115,632 Aufrufe • vor 1 Jahr

🎮 New CSS Game! What about a CSS game that you can play with your keyboard? No, it's not a joke but a reality! Play "Super CSS Mario", the first CSS-Only game playable using your keyboard. CodePen.IO demo in the next tweet 👇 0% JavaScript - 100% CSS Magic! Have fun🤩

🎮 New CSS Game! What about a CSS game that you can play with your keyboard? No, it's not a joke but a reality! Play "Super CSS Mario", the first CSS-Only game playable using your keyboard. CodePen.IO demo in the next tweet 👇 0% JavaScript - 100% CSS Magic! Have fun🤩

CSS by T. Afif

13,762 Aufrufe • vor 2 Jahren

I've created a simple website that allows you to play with squircles using modern CSS `corner-shape`

I've created a simple website that allows you to play with squircles using modern CSS `corner-shape`

Adam Pietrasiak

48,723 Aufrufe • vor 9 Monaten

Stop using this filter with your kids pls 🙏 #shappysway #cartoon #comedyvideo #humor #filter #animation #darkhumour #laugh

Stop using this filter with your kids pls 🙏 #shappysway #cartoon #comedyvideo #humor #filter #animation #darkhumour #laugh

Shappy

13,192 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);" )

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