正在加载视频...

视频加载失败

返回首页

Liquid Glass with CSS and SVG

avstorm's profile picture

Andreas Storm

179,360 subscribers

71,365 次观看 • 8 个月前 •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

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

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

206,286 次观看 • 10 个月前

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

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

160,885 次观看 • 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 年前

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

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

jhey ʕ•ᴥ•ʔ

103,624 次观看 • 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

64,145 次观看 • 1 个月前

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

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 年前

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

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

jhey ʕ•ᴥ•ʔ

66,297 次观看 • 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 次观看 • 2 个月前

Slack (beta) — Liquid Glass with @Expo GlassEffect
0:22

Slack (beta) — Liquid Glass with @Expo GlassEffect

Solarin

37,077 次观看 • 10 个月前

Motiff's native Liquid Glass is live! First design tool with built-in Liquid Glass—tweak range & lensing to craft stunning effects effortlessly. More exciting features on the way! Let your visuals flow with liquid elegance. Share your liquid glass designs below👇. #LiquidGlass #NewFeature #Motiff #UIUX
0:27

Motiff's native Liquid Glass is live! First design tool with built-in Liquid Glass—tweak range & lensing to craft stunning effects effortlessly. More exciting features on the way! Let your visuals flow with liquid elegance. Share your liquid glass designs below👇. #LiquidGlass #NewFeature #Motiff #UIUX

Motiff_AI

49,161 次观看 • 1 年前

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