News for hackers. Stuff that matters.
Re:Frosted Glass from Games to the Web: HTML glass UI inspir... by cubefox on Sunday November 24, 2024 @07:22AM (#42227569)
Yeah. I think Windows Vista didn't have that problem. I assume this can't be solved with CSS.
Re:Frosted Glass from Games to the Web: HTML glass UI inspir... by Andrew6rant on Sunday November 24, 2024 @11:54AM (#42228843)
This can be solved with CSS. Extend the background blur all the way through the element and then use CSS masks to cut out the actual shape you want.

With this, you can remove the border (or inset box shadow), and the edge of the glass will look much, much more real

Re:Frosted Glass from Games to the Web: HTML glass UI inspir... by tyleo on Sunday November 24, 2024 @04:17PM (#42230693)
I tried this and it works! One unfortunate impact is a loss in simplicity. In the example on the page you can apply the non-JavaScript version to pretty much any element and get a nice glass effect with `border-radius` and such still functioning as expected.

Using `clip-path` I'm able to consider background pixels more correctly but it looks like I'd need an extra div and/or some sizing tricks to get everything working exactly as expected.

I'll keep noodling on this and may add an update to the page if a simple solution comes to mind.