Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: CSS generator for a high-def glass effect

glass3d.dev

Post reply on HN
Print view View original

111–120 of 125 posts

Re: Show HN: CSS generator for a high-def glass effect

#111

Post by kris-kay »

smeej wrote: post #94

I might be missing something, but I think this would be a lot more useful to me on mobile if I could hide or collapse the box. Instead, it takes up the entire screen and I can't really even see the effect behind it. I'm still interested enough that I'll probably try it again later on a larger screen, but I think some kind of option to hide the box would go a long way!

> this would be a lot more useful to me on mobile if I could hide or collapse the box.

Are you referring to the code preview area?

In my first implementation, I had a small demo rectangle above the generator UI, but even a small one took up too much space and made the UI harder to use. If I let the whole page scroll, people got frustrated because it wasn’t obvious they needed to stay at the top of the scroll to see the rectangle they were editing.

Since this tool is mainly intended for coding, I’m prioritizing the desktop experience, with mobile acting more as a quick preview and proof that it works on mobile. That said, if you know of any similar UI that works really well on mobile, please share links!

Re: Show HN: CSS generator for a high-def glass effect

#112

Post by kris-kay »

9dev wrote: post #88
jasonthorsness wrote: post #7

Earlier quoted context omitted.

I think this is a clever moat Apple created with Liquid Glass: they picked an effect that is easy to make a worse version of, but very hard to do the real/right way (and humans have an intuition for real/right because they see real glass every day). So any copycats will look worse in a way that's pretty obvious and Apple gets to keep the "premium-looking" product.

That is one way things could turn out. On the other hand, when Apple started to introduce the iOS-7-style frosted glass effects, we got backdrop-blur in CSS, which handles the hard parts of achieving a similar effect on the web. If this whole liquid glass effect catches on big time (which isn't out of the question right now), we might see something in the web platform that gives developers access to the platform prim…

> I don't think this is a kind of moat they created with the explicit intention to make web apps worse.

Yes, exactly! Personally, I’m glad that Apple invests in this kind of R&D. They push the whole field forward as others try to catch up. I doubt they’ll ever make their UI freely available to all other platforms, but I do hope CSS continues to add features that make these effects much easier to implement on the web.

Re: Show HN: CSS generator for a high-def glass effect

#113

Post by kris-kay »

altairprime wrote: post #49
jasonthorsness wrote: post #7

Earlier quoted context omitted.

I think this is a clever moat Apple created with Liquid Glass: they picked an effect that is easy to make a worse version of, but very hard to do the real/right way (and humans have an intuition for real/right because they see real glass every day). So any copycats will look worse in a way that's pretty obvious and Apple gets to keep the "premium-looking" product.

I think the other component of the moat is that their OS/GPU stack is power-optimized for this effect in hardware, which generic solutions for generic hardware will have trouble matching - even a lower fidelity replication’s power drain could be an order of magnitude higher as a result.

True, innovation is much easier when you have full control over the hardware. My project would have taken a fifth of the time if I were only targeting Safari on Apple devices. But I trust that clever engineers and developers will keep finding ways to optimize effects for other platforms and devices.

Re: Show HN: CSS generator for a high-def glass effect

#114

Post by [deleted] »

refulgentis wrote: post #23

Pro tip: Apple adds fancy GPU effects because Android can't rely on good GPUs, so Apple can continually define premium. Thus, the odds you're doing glass-morphism via a Gaussian blur and drop shadow in CSS, are exactly 0. They are assuredly at abstraction levels far below that. (disclaimer: worked on Pixel, did the color extraction + color system stuff for Material You)

[deleted]

Re: Show HN: CSS generator for a high-def glass effect

#116

Post by account42 »

chrismorgan wrote: post #3

This 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.

I don't think either version is really more correct than the other. The default approximates an object that is directly behind the frosted glass while the tweaked version simulates an object that is much further away.

For me the tweaked version is much more distracting and looks more wrong due to conflicting depth signals.

Re: Show HN: CSS generator for a high-def glass effect

#117

Post by account42 »

kris-kay wrote: post #51
tempodox wrote: post #42

Earlier quoted context omitted.

The background.

So you need a video HTML tag with all of these attributes: and the CSS: .bg-video { position: fixed; z-index: -1; inset: 0; width: 100%; (don't set this to 100vw or you will have scrollbar issues) height: 100%; min-height: 100vh; object-fit: cover; object-position: center; pointer-events: none; } The part I still need to do myself is provide multiple video sizes and show the one that's most suitable for the viewport.

> playsinline

Oh great, yet another tag you need to add to tell mobile browsers to do the right thing instead of fucking with your website for no reason.

Re: Show HN: CSS generator for a high-def glass effect

#118

Post by account42 »

elpocko wrote: post #8

Is this considered new design? What is special about it? I don't see much of a difference compared to the Aero glass effect in Windows Vista from 2006. I've also seen it on many websites, using `backdrop-filter: blur`. Or am I missing something?

It's the Apple effect. Old tricks become the hot new thing when they discover them.

Re: Show HN: CSS generator for a high-def glass effect

#119

Post by account42 »

rpastuszak wrote: post #32
elpocko wrote: post #11

Earlier quoted context omitted.

>Aqua from OSX Cheetah I've never used OSX, but I would guess from screenshots that it didn't do dynamic layered gaussian blur of large screen regions in realtime, which would've been too much for the hardware of the year 2000.

That is true, but don't forget water is the essence of moisture. Also, those scrollbars were quite impressive for their time.

I always thought they were extremely kitschy, just like the Windows XP window frames.
Post reply on HN