Loading video...

Video Failed to Load

Go Home

cross-browser liquid toggle 👨‍🔬 CSS + SVG filter + drag mechanics 🧑‍🍳 (exploding view 👇)

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

145,980 subscribers

176,569 views • 7 months ago •via X (Twitter)

Science & TechnologyGamingEducation
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

messin' with CSS + SVG filter sticker effects 🧑‍🍳
0:36

messin' with CSS + SVG filter sticker effects 🧑‍🍳

jhey ʕ•ᴥ•ʔ

160,713 views • 1 year ago

gettin' back on the demo train 🚂 makin' a little progress with cross-browser "liquid" controls using CSS 🧑‍🍳
0:21

gettin' back on the demo train 🚂 makin' a little progress with cross-browser "liquid" controls using CSS 🧑‍🍳

jhey ʕ•ᴥ•ʔ

24,585 views • 10 months ago

liquid slider 🧪 <input type=range> + CSS + SVG filter + delta scale on pointermove 🤙
0:20

liquid slider 🧪 <input type=range> + CSS + SVG filter + delta scale on pointermove 🤙

jhey ʕ•ᴥ•ʔ

73,415 views • 7 months ago

Liquid Glass with CSS and SVG
0:36

Liquid Glass with CSS and SVG

Andreas Storm

71,027 views • 6 months ago

dissolving text input with SVG noise + CSS filter, displace + mask duplicate layer whilst clipping the original 🤙 check the exploded view 👇
0:39

dissolving text input with SVG noise + CSS filter, displace + mask duplicate layer whilst clipping the original 🤙 check the exploded view 👇

jhey ʕ•ᴥ•ʔ

43,591 views • 1 year ago

Always have an SVG goo filter ready to go in your UI toolkit 🎯 .container { filter: url(#​goo); } One line of CSS on the container + the SVG filter 🤙 Throw a border on for "Fake 3D" 👀 SVG filter code below 👇
0:31

Always have an SVG goo filter ready to go in your UI toolkit 🎯 .container { filter: url(#​goo); } One line of CSS on the container + the SVG filter 🤙 Throw a border on for "Fake 3D" 👀 SVG filter code below 👇

jhey ʕ•ᴥ•ʔ

189,511 views • 1 year ago

"roll for premium" with CSS, [type=range], and an SVG noise filter 🤙
0:39

"roll for premium" with CSS, [type=range], and an SVG noise filter 🤙

jhey ʕ•ᴥ•ʔ

222,102 views • 1 year ago

figured out how to do motion blurs in the browser using svg filters and css
0:35

figured out how to do motion blurs in the browser using svg filters and css

ravarcheon

24,707 views • 6 months ago

had to try CSS filter + SVG glass displacement on webcam input – crank saturation for cheap gold ✨
0:36

had to try CSS filter + SVG glass displacement on webcam input – crank saturation for cheap gold ✨

jhey ʕ•ᴥ•ʔ

782,437 views • 11 months ago

CSS Scroll-driven knockout text using SVG filter 🥊 section { filter: url(#​knockout); } section h1 { animation: shrink; } @​keyframes shrink { 0% { scale: 36; }} Animate text scale on a video overlay ✅ Knock out text using SVG filter ✅ Drive with scroll ✅
0:46

CSS Scroll-driven knockout text using SVG filter 🥊 section { filter: url(#​knockout); } section h1 { animation: shrink; } @​keyframes shrink { 0% { scale: 36; }} Animate text scale on a video overlay ✅ Knock out text using SVG filter ✅ Drive with scroll ✅

jhey ʕ•ᴥ•ʔ

99,976 views • 1 year ago

Wowowow epic talk by Chris Feijoo about building liquid glass with SVG and CSS #ReactParis He has an entire post about it!
0:24

Wowowow epic talk by Chris Feijoo about building liquid glass with SVG and CSS #ReactParis He has an entire post about it!

Una 🇺🇦

34,971 views • 2 months ago

jus' one more CSS progressive blur demo 🧑‍🍳 backdrop-filter: blur() stack + position: sticky + display: grid for progressive blur on scroll
0:32

jus' one more CSS progressive blur demo 🧑‍🍳 backdrop-filter: blur() stack + position: sticky + display: grid for progressive blur on scroll

jhey ʕ•ᴥ•ʔ

44,674 views • 1 year ago

messin' with text using CSS + SVG 🤌
0:26

messin' with text using CSS + SVG 🤌

jhey ʕ•ᴥ•ʔ

85,634 views • 1 year ago

CSS-only Optimus Prime toggle 🤙 CSS transform was intended for transformers, right?
0:53

CSS-only Optimus Prime toggle 🤙 CSS transform was intended for transformers, right?

jhey ʕ•ᴥ•ʔ

235,609 views • 3 years ago

Liquid glass toggle and slider
0:21

Liquid glass toggle and slider

Andreas Storm

727,764 views • 1 year ago

CSS + SVG flames iteration 🔥 "iterate to greatness" 🤞
0:39

CSS + SVG flames iteration 🔥 "iterate to greatness" 🤞

jhey ʕ•ᴥ•ʔ

66,297 views • 1 year ago

curved scrollbar 👨‍🍳 powered by GSAP + CSS scroll-snap + SVG
0:40

curved scrollbar 👨‍🍳 powered by GSAP + CSS scroll-snap + SVG

jhey ʕ•ᴥ•ʔ

97,263 views • 1 year ago

View Transition powered drag n' drop! just drag events then swappin DOM, #CSS view transitions doin all the animation work (which it's GREAT AT) 🤯 that animated emoji don't miss a beat try it!
0:27

View Transition powered drag n' drop! just drag events then swappin DOM, #CSS view transitions doin all the animation work (which it's GREAT AT) 🤯 that animated emoji don't miss a beat try it!

Adam Argyle

351,554 views • 2 years ago

messin' with SVG filter burn effects 🔥
0:27

messin' with SVG filter burn effects 🔥

jhey ʕ•ᴥ•ʔ

30,090 views • 1 year ago

you can just create fire with CSS + SVG filters ┬┴┬┴┤ʕ•ᴥ├┬┴┬┴
0:35

you can just create fire with CSS + SVG filters ┬┴┬┴┤ʕ•ᴥ├┬┴┬┴

jhey ʕ•ᴥ•ʔ

103,624 views • 1 year ago