Amazing work!
Show HN: CSS generator for a high-def glass effect
71–80 of 125 posts
Re: Show HN: CSS generator for a high-def glass effect
#72It looks so much better with some texture!
Re: Show HN: CSS generator for a high-def glass effect
#73Really nicely done! It's always surprising to me how often computer graphics isn't "one weird trick" and more like "5 layered tricks." Doing it with cross-browser compat is an additional challenge. Do you have a sense of which aspects are the most resource-intensive? Naively I would guess it's the backdrop-filter.
And sometimes it's 5 layered tricks just to "center" something.
Re: Show HN: CSS generator for a high-def glass effect
#74Amazing work!
thank you!
Re: Show HN: CSS generator for a high-def glass effect
#75Earlier quoted context omitted.
Interesting, no there are no scroll effects anywhere on the page. Would you mind sharing what device, browser, and level of internet connection you're using?
Never mind, I tried recording it now but could not reproduce it anymore. It was probably something on my phone at the time (Firefox on Android). I tried to remove or edit my previous comment but it seems it's not an option. Sorry for the noise.
All good! Thanks for looking into it.
Re: Show HN: CSS generator for a high-def glass effect
#76i collect these! https://github.com/swyxio/spark-joy others - https://ui.glass/generator/ Get started with this free CSS generator based on the glassmorphism design specifications to quickly design and customize the style properties. - frosted glass sticky header https://www.joshwcomeau.com/css/backdrop-filter/ - glassy glassmorphism [codepen]( https://codepen.io/a-trost/pen/dypQzwq ), [in context]( https://codepen.i…
Just saw that you added this project to the spark-joy list. Thanks so much!
Re: Show HN: CSS generator for a high-def glass effect
#77This suffers from the problem of only blurring using the pixels immediately behind the surface, as demonstrated well in https://www.joshwcomeau.com/css/backdrop-filter/#the-issue . That and the discussion in https://news.ycombinator.com/item?id=42302907 are good reading. If the backdrop is going to move underneath, this is fairly important; if it will be static, it’s not normally important.
Josh’s solution also intuitively appears wrong to me because it seems to assume that nearby elements are emissive, and I can’t agree with that as a standard physical property of “materials” on the web.
I instead assume that materials are by default more similar to paper.
Re: Show HN: CSS generator for a high-def glass effect
#78Really nicely done! It's always surprising to me how often computer graphics isn't "one weird trick" and more like "5 layered tricks." Doing it with cross-browser compat is an additional challenge. Do you have a sense of which aspects are the most resource-intensive? Naively I would guess it's the backdrop-filter.
And sometimes it's 5 layered tricks just to "center" something.
Not anymore! We live in the golden age of display: grid; + place-items: center;
Re: Show HN: CSS generator for a high-def glass effect
#79This looks like it uses similar techniques to my own glass implementation: https://news.ycombinator.com/item?id=42225481
Especially with respect to the abuse of box shadow.
Re: Show HN: CSS generator for a high-def glass effect
#80It looks so much better with some texture!
I agree, even a very subtle texture makes a big difference!