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

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

Возникла проблема при загрузке этого видео. Это может быть связано с временными проблемами сети или видео может быть недоступно.

На главную

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

jhey ʕ•ᴥ•ʔ

146,391 subscribers

158,295 просмотров • 10 месяцев назад •via X (Twitter)

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

Anya Rossi• Live Now

Private livecam show

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

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

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

backdrop-filter + svg-filter #css

backdrop-filter + svg-filter #css

Kitasenju Design

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

The Figen

115,632 просмотров • 1 год назад

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

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

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