Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,246 subscribers

139,863 görüntüleme • 7 ay önce •via X (Twitter)

SanatEğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

backdrop-filter + svg-filter #css
0:16

backdrop-filter + svg-filter #css

Kitasenju Design

24,006 görüntüleme • 2 yıl önce

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

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

40,779 görüntüleme • 7 ay önce

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 👀)
0:14

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,595 görüntüleme • 5 ay önce

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!
0:18

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

102,613 görüntüleme • 3 ay önce

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; }
0:18

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,376 görüntüleme • 2 yıl önce

💡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:
0:15

💡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

368,848 görüntüleme • 1 yıl önce

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

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

jhey ʕ•ᴥ•ʔ

20,046 görüntüleme • 6 ay önce

How to get fixed background - CSS
0:11

How to get fixed background - CSS

Ali Reza

11,389 görüntüleme • 1 yıl önce

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%); }
0:11

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

301,383 görüntüleme • 4 ay önce

Water Filter in background 👀
0:14

Water Filter in background 👀

Aayushi Patil

25,950 görüntüleme • 2 ay önce

I love animating using CSS.
0:19

I love animating using CSS.

David Aerne

120,495 görüntüleme • 2 yıl önce

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

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

jhey ʕ•ᴥ•ʔ

101,952 görüntüleme • 1 ay önce

Learn about possible values of CSS background-repeat property 👨‍💻🚀
0:11

Learn about possible values of CSS background-repeat property 👨‍💻🚀

David Mráz

101,607 görüntüleme • 2 yıl önce

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

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

jhey ʕ•ᴥ•ʔ

94,008 görüntüleme • 1 yıl önce

Just messin with you🖤
0:15

Sensitive content

Just messin with you🖤

Dasha

55,676 görüntüleme • 2 yıl önce

💡 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:
0:17

💡 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,451 görüntüleme • 1 yıl önce

"Background blur" but reveal the depth of the objects. As expected, frosted glass works. Made in Rive
0:18

"Background blur" but reveal the depth of the objects. As expected, frosted glass works. Made in Rive

Dimitri Novikov 🇺🇦

41,547 görüntüleme • 1 yıl önce

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

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

The Figen

115,632 görüntüleme • 1 yıl önce

Using filter❎ wearing filter ✅
0:15

Sensitive content

Using filter❎ wearing filter ✅

incest boy

23,500 görüntüleme • 1 yıl önce