Maybe technically impressive but please don't use this on your websites, it looks like shit (the effect in general, not this specific implementation)
It looks really good on iOS. I've been running the beta for a while and the execution is great.
Liquid Glass in the Browser: Refraction with CSS and SVG
41–50 of 127 posts
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#42As much as I still dislike Liquid Glass, this is insanely impressive!
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#43Chrome‑only demo The interactive demo at the end currently works in Chrome only (due to SVG filters as backdrop‑filter). You can still read the article and interact with the inline simulations in other browsers. Dishonor on your WHOLE FAMILY! dishonor on you, dishonor on your cow...
I had the same reaction but the weird thing is: it looked ok in FireFox..?
Yeah, curious. The mentioned backdrop-filter seems to be supported everywhere
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#44Chrome‑only demo The interactive demo at the end currently works in Chrome only (due to SVG filters as backdrop‑filter). You can still read the article and interact with the inline simulations in other browsers. Dishonor on your WHOLE FAMILY! dishonor on you, dishonor on your cow...
[deleted]
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#45I forked a JS library for liquid-glass and patched it up with some positioning fixes. It's fun to use in presentations. See https://github.com/nkzw-tech/liquid-glass
Nice! I like yours more
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#46Earlier quoted context omitted.
I had the same reaction but the weird thing is: it looked ok in FireFox..?
Yeah, curious. The mentioned backdrop-filter seems to be supported everywhere https://caniuse.com/?search=backdrop-filter
backdrop-filter is supported by all major browsers, but specifically using SVG filters, which are more powerful and is out-of-spec, is only supported in Chromium-based browsers.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#47I first tried the demos on Firefox and was like "wow, this looks fancy". Then, I saw there was a "Chrome-only" warning. I actually prefer the way it looks on Firefox, TBH.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#48Apple design nowadays should be something we point to and laugh at, not something to imitate. Apple lost the plot on design after Steve Jobs died and Jony Ive assumed full control. It's not Jony Ive's fault. That's the nature of their partnership, he created and Steve Jobs edited. Ive, of all people, probably lost the most when Steve Jobs died. It's all been downhill ever since. Ousting Jony Ive and putting Alan Dye…
I've been running the beta on my phone for a while ago, and I pretty much forgot about it. The new design works really well and is much less obtrusive than you'd imagine. Those few bad moments posted from the first dev beta have all been resolved now.
Most people aren't very discerning about user interface intricacies.
Most people's reaction to the iOS 7 design disaster was: "ooh this feels like a whole new phone".
So there's that.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#49I made something similar to this with WebGL shaders (the benefit being it works across browsers): https://real-glass.vercel.app - The tricky thing for me was making it refract real HTML elements behind
Looks nice! It's too slow to actually use though. Op's is much smoother.
Not over here. As far as I understand Op's solution does not utilize a gpu.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#50I made something similar to this with WebGL shaders (the benefit being it works across browsers): https://real-glass.vercel.app - The tricky thing for me was making it refract real HTML elements behind
Looks nice! It's too slow to actually use though. Op's is much smoother.
It's the opposite on my macbook pro/chrome computer... the OP is unusable, but the webGL version is super smooth