I've made a JavaScript version that actually refracts elements on the page, check it out: https://real-glass.vercel.app/
FYI frosting does not work in Safari
Show HN: CSS generator for a high-def glass effect
121–125 of 125 posts
Re: Show HN: CSS generator for a high-def glass effect
#122Earlier quoted context omitted.
The backdrop blur is unrelated to the surface properties of the elements underneath: it’s about the frosted glass refracting light, and some of that light it refracts comes from beyond its bounding box, which a naive backdrop-blur won’t observe.
Frosted glass doesn’t pass through light of objects that are simply near by it. It doesn’t make physical sense. I understand the defect, but neither does this solution correctly fix the problem. Note the circle before it intersects with the rect, without accounting for pixels beyond the bounds, the blur is incorrect because the kernel doesn’t take into effect the circle. Note the blur after extending the kernel beyon…
I have an inking of what you’re getting at now. I want to try modelling it with full ray tracing now (in the absence of a piece of actual frosted glass!), to convince myself if you’re right (I’m not sure one way or the other), but sadly I doubt I’ll get to it any time soon.
Re: Show HN: CSS generator for a high-def glass effect
#123I haven't heard anything but negative comments about liquid glass from any apple users I personally know. Here goes everyone else rushing to do things just because apple did them. Not everything apple does is good. This is one of those cases.
This project isn’t meant to recreate Liquid Glass. I started working on it because I needed UI that would look good over unknown or changing backgrounds, like in a video game, over video, or in my case AR.
Re: Show HN: CSS generator for a high-def glass effect
#124Earlier quoted context omitted.
Frosted glass doesn’t pass through light of objects that are simply near by it. It doesn’t make physical sense. I understand the defect, but neither does this solution correctly fix the problem. Note the circle before it intersects with the rect, without accounting for pixels beyond the bounds, the blur is incorrect because the kernel doesn’t take into effect the circle. Note the blur after extending the kernel beyon…
I have an inking of what you’re getting at now. I want to try modelling it with full ray tracing now (in the absence of a piece of actual frosted glass!), to convince myself if you’re right (I’m not sure one way or the other), but sadly I doubt I’ll get to it any time soon.
I used physical samples of pebbled glass, curved glass, and clear glass. You can get the same effect using curved glass because of how natural light bounces off of the surface of the subject object and onto the glass, but you don't get this pronounced of effect with a flat panel of glass, frosted or not.
It's too exaggerated for, say, a kernel of 32px.
Re: Show HN: CSS generator for a high-def glass effect
#125Earlier quoted context omitted.
I recently saw a large gold (plated) surface - larger than a hand. The effect the light played off of that metal was amazing, I've never seen the effect in small gold jewelry. Photographs and video just don't capture it. If Apple ever turns their attention to gold and manages to nail that effect, I would consider one of their devices just for that aspect.
Gold is really good at reflecting infrared which is why it was chosen as the coating for JWST's mirrors. I wonder if the colors just past visible on its way to IR would be just perceptible enough to give the look you are noticing???
Might the gold have tinted some of the IR into a visible wavelength? A wavelength that is otherwise not commonly seen in nature?