I 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
Liquid Glass in the Browser: Refraction with CSS and SVG
31–40 of 127 posts
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#32Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#33Earlier quoted context omitted.
> Chrome‑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.
I think I’ve trained myself to ignore shiny boxes outside the main text like that. Most of the time they are trying to sell something.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#34 Chrome‑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...Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#35But liquid glass is such a horrible idea for a UI!
Now I feel like an old person, but I live with glasses every day and absolutely love clean UI's.
Introducing glass lens f*ckery just for the sake of it is terrible.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#36Chrome‑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...
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#37I 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
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#38Chrome‑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...
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#39Apple 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 in charge didn't help.
The problem remains: there's no longer an editor in charge.
Apple fans like to think that they've recovered a little since the iOS 7 debacle, but in reality it's just self delusion.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#40Apple 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…