None of it looks usable. Perfect for digital family photos.
Great article though.
Liquid Glass in the Browser: Refraction with CSS and SVG
51–60 of 127 posts
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#52Chrome‑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...
Works fine on Firefox tho
And for me it was where it was the smoothest. But it even worked in Safari, albeit a bit slowly.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#53Some serious work has gone into this article.
Unconvinced about the usability case for 'glass'.
Once again, Apple takes off and nukes it's developer ecosystem from orbit.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#54Chrome‑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...
Works fine on Firefox tho
Not on mobile
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#55Earlier quoted context omitted.
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.
Not sure if this is relevant, but while moving the slider around, in chromium i see 40% gpu utilisation, while in firefox less than 20% (macbook m3 pro). I do not observe any noticeable difference otherwise in terms of quality.
PS Neat website and explanations, but talking about the liquid glass as a design principle in general, I would rather ui elements in a random website not use that much of gpu for not great reasons but maybe that's my problem of not thinking different.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#56Netlfix's logged out UI has this glass effect for background for some time and it slows down the whole site.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#57As much as I still dislike Liquid Glass, this is insanely impressive!
Agreed!
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#58Earlier quoted context omitted.
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.
I actually see gpu utilisation in OP's website when I move things (m3 pro), but this other solution shows much less gpu utilisation (prob more efficient?).
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#59Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#60Chrome‑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..?
Not OK on mobile Firefox: displacement maps do not apply, so there's no actual refraction, the liquid feeling; there's only the specular effect at the edges.
Try opening it in a Chromium-based browser and compare.