Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

backdrop-filter + svg-filter #css

kitasenjudesign's profile picture

Kitasenju Design

16,583 subscribers

24,006 görüntüleme • 2 yıl önce •via X (Twitter)

EğitimBilim & Teknoloji#css
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

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

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

jhey ʕ•ᴥ•ʔ

139,739 görüntüleme • 7 ay ö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 one svg filter and a tiny bit of js to get this sticker-style text effect
0:17

just one svg filter and a tiny bit of js to get this sticker-style text effect

Kevin Grajeda

60,174 görüntüleme • 1 yıl önce

alternate filter version
0:11

alternate filter version

name

161,078 görüntüleme • 1 yıl önce

Wo stellt ihr EURE PS5 hin? Zeigt es uns. 😎 Filter IG: Filter FB: #Gaming
0:18

Wo stellt ihr EURE PS5 hin? Zeigt es uns. 😎 Filter IG: Filter FB: #Gaming

PlayStationDE

80,171 görüntüleme • 3 yıl önce

FILTER JENNIE IS INSANE
0:15

FILTER JENNIE IS INSANE

jennie

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

gooey menu made with svg filters and some little animations, just css and a sprinkle of svg magic
0:18

gooey menu made with svg filters and some little animations, just css and a sprinkle of svg magic

Kevin Grajeda

51,710 görüntüleme • 1 yıl önce

finally got around to updating my site to Next.js 15 + Tailwind CSS v4. finally added a dark mode which was quite nice with oklch() + v4 theme vars. i made it greenish to complement my warm light mode. also used View Transition API + svg filter for this theme reveal effect.
0:10

finally got around to updating my site to Next.js 15 + Tailwind CSS v4. finally added a dark mode which was quite nice with oklch() + v4 theme vars. i made it greenish to complement my warm light mode. also used View Transition API + svg filter for this theme reveal effect.

Stammy

72,402 görüntüleme • 1 yıl önce

toggle 🌛 brought to life with CSS && SVG
0:19

toggle 🌛 brought to life with CSS && SVG

jhey ʕ•ᴥ•ʔ

84,189 görüntüleme • 1 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 • 6 ay önce

Dokyeom’s gwenchana challenge ♡ without filter with filter
0:14

Dokyeom’s gwenchana challenge ♡ without filter with filter

⁽̨̡ ¨̮ ⁾̧̢🌻

217,680 görüntüleme • 1 yıl önce

"Learn CSS: Clipping with SVG, shape-outside, shape-margin" by Victor A
0:15

"Learn CSS: Clipping with SVG, shape-outside, shape-margin" by Victor A

CodePen.IO

11,285 görüntüleme • 9 ay önce

Dein Gesicht ist mir egal! Try Rammstein's "Sehnsucht" filter on Instagram now:
0:18

Dein Gesicht ist mir egal! Try Rammstein's "Sehnsucht" filter on Instagram now:

Rammstein

117,418 görüntüleme • 3 yıl önce

5 sites for web developers - React CSS components - Full-stack app hosting (JavaScript, PHP, Python...) - Tailwind CSS library - SVG logos - Typescript UI
0:12

5 sites for web developers - React CSS components - Full-stack app hosting (JavaScript, PHP, Python...) - Tailwind CSS library - SVG logos - Typescript UI

Csaba Kissi

31,129 görüntüleme • 6 ay önce

mustache filter
0:14

mustache filter

eunoyama ritsuka

133,193 görüntüleme • 1 yıl önce

Blue filter
0:11

Blue filter

kenji co ( LF SPONSOR )

48,925 görüntüleme • 10 ay ö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,270 görüntüleme • 3 ay önce

Do you know about the filter property in CSS? Among many other awesome options, it allows you to easily add a black and white effect on images.
0:10

Do you know about the filter property in CSS? Among many other awesome options, it allows you to easily add a black and white effect on images.

andrej

160,866 görüntüleme • 3 yıl önce