正在加载视频...

视频加载失败

返回首页

Liquid Glass with CSS and SVG

avstorm's profile picture

Andreas Storm

200,936 subscribers

71,535 次观看 • 10 个月前 •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

26 条评论

Andreas Storm 的头像
Andreas Storm10 个月前

Pre-calculating of the displacement magnitude

Andreas Storm 的头像
Andreas Storm10 个月前

Absolutely love it @KubeKhrm

Sam 的头像
Sam10 个月前

It's ironic how the Apple's own browser is incapable of rendering this effect

Oğuz Yağız Kara 的头像
Oğuz Yağız Kara10 个月前

It's insane

System Settings 的头像
System Settings10 个月前

very cool!

oleg 的头像
oleg10 个月前

thanks for sharing 🤝

rege 的头像
rege10 个月前

Perfection

ozn 的头像
ozn10 个月前

that's impressive

Bruno 的头像
Bruno10 个月前

What a wonderful work. Even the graphics on the website are amazing 👏

Tiago Sá 的头像
Tiago Sá10 个月前

Amazing work!! Incredible blog post!

Raj Breno 的头像
Raj Breno10 个月前

Great

Brandon McConnell 的头像
Brandon McConnell10 个月前

@KubeKhrm You make it look easy 🥵

Raul 的头像
Raul10 个月前

Just came across this. It's great!

Ehsan Mahpour 的头像
Ehsan Mahpour10 个月前

This is awesome!

.... 的头像
....9 个月前

Help 😭 am I close?

Ankesh 的头像
Ankesh10 个月前

Amazing work!

Locale Network 🏡 的头像
Locale Network 🏡10 个月前

The refraction and displacement controls are impressive

𝗕𝗮𝗻𝗱𝗶𝗻𝗼𝗽𝗹𝗮 的头像
𝗕𝗮𝗻𝗱𝗶𝗻𝗼𝗽𝗹𝗮10 个月前

wow really good article, with the nice examples and all! good job!

sam 的头像
sam10 个月前

Doesn’t work on safari :(

Rafi Wirana 的头像
Rafi Wirana10 个月前

Genius

Ditectrev 的头像
Ditectrev10 个月前

Fantastic work!

Fran 的头像
Fran10 个月前

that’s fkin crazy

concept10 的头像
concept1010 个月前

I haven’t read blogs in like forever. I will start reading this for sure.

Arnav Nath 的头像
Arnav Nath10 个月前

No matter how much hate liquid glass gets, it still is interesting:)

Dex 的头像
Dex10 个月前

did you see my post hehe

Billgo.me 的头像
Billgo.me10 个月前

Good job

相关视频

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 🇺🇦

35,014 次观看 • 6 个月前

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

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

jhey ʕ•ᴥ•ʔ

208,602 次观看 • 11 个月前

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

95,939 次观看 • 11 个月前

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

messin' with text using CSS + SVG 🤌

jhey ʕ•ᴥ•ʔ

85,634 次观看 • 1 年前

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

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

jhey ʕ•ᴥ•ʔ

161,048 次观看 • 1 年前

"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,289 次观看 • 1 年前

finally liquid glass web is here and it's open source. real WebGL refraction, chromatic aberration, liquid motion not usual backdrop-filter css hack. playground at code at MIT so do whatever you want with it #LiquidGlass #OpenSource #ReactJS #WebGL #UIComponents #FrontendDevelopment #CSS #JavaScript #WebDev #UI #UX #React #ComponentLibrary #OpenSourceSoftware #Frontend
0:20

finally liquid glass web is here and it's open source. real WebGL refraction, chromatic aberration, liquid motion not usual backdrop-filter css hack. playground at code at MIT so do whatever you want with it #LiquidGlass #OpenSource #ReactJS #WebGL #UIComponents #FrontendDevelopment #CSS #JavaScript #WebDev #UI #UX #React #ComponentLibrary #OpenSourceSoftware #Frontend

Tirth Parmar

65,100 次观看 • 3 个月前

tried recreating the dropdown from Aave 's liquid glass component page i was not able to nail the exact 𝚌𝚕𝚒𝚙𝙿𝚊𝚝𝚑 animation but implemented a few interesting details - svg filter for gooey dropdown transition (gaussian blue + color-matrix) - CSS clip-path 𝚜𝚑𝚊𝚙𝚎() morphing a rounded rect into the panel tinker with it here ↓
0:24

tried recreating the dropdown from Aave 's liquid glass component page i was not able to nail the exact 𝚌𝚕𝚒𝚙𝙿𝚊𝚝𝚑 animation but implemented a few interesting details - svg filter for gooey dropdown transition (gaussian blue + color-matrix) - CSS clip-path 𝚜𝚑𝚊𝚙𝚎() morphing a rounded rect into the panel tinker with it here ↓

Manu Arora

15,160 次观看 • 3 个月前

riffin' on forms is fun 3D CSS transforms + SVG filtering with feDisplacementMap 🤙
0:32

riffin' on forms is fun 3D CSS transforms + SVG filtering with feDisplacementMap 🤙

jhey ʕ•ᴥ•ʔ

27,241 次观看 • 1 年前

Stickers made with css and svg filters, inspired by the awesome work of Mats Erdkamp and Guillermo Rauch The peel effect is entirely CSS (transformations and masking), while the sticker outline, the shadow, and the lighting was created using SVG filters. Codepen dropping soon below!
0:27

Stickers made with css and svg filters, inspired by the awesome work of Mats Erdkamp and Guillermo Rauch The peel effect is entirely CSS (transformations and masking), while the sticker outline, the shadow, and the lighting was created using SVG filters. Codepen dropping soon below!

balint

55,591 次观看 • 1 年前

Having fun with Liquid Glass
0:24

Having fun with Liquid Glass

Apple Design

108,043 次观看 • 1 年前

Have fun with Liquid Glass
0:23

Have fun with Liquid Glass

Apple Design

671,631 次观看 • 1 年前

curved scrollbar: completed it ✅ CSS + SVG to animate stroke-dashoffset combined with scroll-snap
0:40

curved scrollbar: completed it ✅ CSS + SVG to animate stroke-dashoffset combined with scroll-snap

jhey ʕ•ᴥ•ʔ

229,909 次观看 • 1 年前

lol used the wrong svg function. updated it so you can still set text color with css (and have transparent backgrounds)
0:25

lol used the wrong svg function. updated it so you can still set text color with css (and have transparent backgrounds)

Mark Hurrell

39,408 次观看 • 1 个月前

Liquid glass toggle and slider
0:21

Liquid glass toggle and slider

Andreas Storm

727,764 次观看 • 1 年前

Glass Marbles! A small experiment in real-time refraction. Combining SVG filters with a WebGL-rendered displacement map to simulate the optical properties of glass spheres. #webgl #svg #shaders #creativecoding
0:48

Glass Marbles! A small experiment in real-time refraction. Combining SVG filters with a WebGL-rendered displacement map to simulate the optical properties of glass spheres. #webgl #svg #shaders #creativecoding

Hans Chiu

11,604 次观看 • 4 个月前

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 次观看 • 10 个月前