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

Next-level frosted glass with backdrop-filter

joshwcomeau.com

Post reply on HN
Print view View original

31–40 of 67 posts

Re: Next-level frosted glass with backdrop-filter

#31

Post by sureIy »

probabletrain wrote: post #25
sureIy wrote: post #24

This is the sort of completely unnecessary details that eat hours of your time and add tons of code and maintenance for something that few-to-none notice. It's great to experiment, but don't use this in projects that you intend to maintain. Signed, someone who used to do this a lot.

I think "tons of code and maintenance" is an exaggeration for this effect, once it's done you'll rarely have to come back to it. Many people value creating and using products with these kinds of details, I disagree with "don't use this in projects you intend to maintain" as across-the-board advice.

> is an exaggeration for this effect

I disagree. Check the changes required to the spacing/sizing. Soon you will need to adjust those values and that.is.maintenance. Multiply this by each detail and soon you have more work than you signed up for. This is usually when someone comes along and wants a rewrite because the codebase is fragile.

Re: Next-level frosted glass with backdrop-filter

#32

Post by sureIy »

hahn-kev wrote: post #30
sureIy wrote: post #24

This is the sort of completely unnecessary details that eat hours of your time and add tons of code and maintenance for something that few-to-none notice. It's great to experiment, but don't use this in projects that you intend to maintain. Signed, someone who used to do this a lot.

Before I read your comment I thought you were referring to blurring in general, then I read the article and... Yeah, it's not worth it for software that needs to be maintained, for a fun hobby project sure do whatever

Yeah, definitely do add those 2 extra properties to make your site look nice, but don't overwork the DOM just because the native CSS blur isn't perfect enough. Guaranteed 0.01% of people would even register this change.

I'd rather open a bug report and hope for the best in this case.

Re: Next-level frosted glass with backdrop-filter

#33

Post by zarzavat »

sureIy wrote: post #24

This is the sort of completely unnecessary details that eat hours of your time and add tons of code and maintenance for something that few-to-none notice. It's great to experiment, but don't use this in projects that you intend to maintain. Signed, someone who used to do this a lot.

This is the webdev equivalent of the inside of a Mac being tidy and attractive (black PCBs!). Sure, it doesn't matter, but if you want to build a brand based on attention to details then these are exactly the kinds of details you need to consider.

Re: Next-level frosted glass with backdrop-filter

#34

Post by tyleo »

KaoruAoiShiho wrote: post #7

How does this compare with this that was posted on HN a few weeks ago? https://www.tyleo.com/html-glass.html

I’m the author of tyleo.com. I’m happy to see folks innovating and building on the idea. I’m also surprised at how popular this topic is on HN!

Both of these posts add additional tweaks beyond `backdrop-filter: blur()` to enhance glass effects. We use different tweaks so it looks like the techniques in each of our posts is compatible. When I get around to it I’ll update my page to link to this new one.

Perhaps in a few weeks we will get the, “I’ve consolidated all the HTML glass effects on HN and this is what it looks like,” post :)

Re: Next-level frosted glass with backdrop-filter

#36

Post by tyleo »

webstrand wrote: post #6

You can do it with negative margins too, https://codepen.io/webstrand/pen/OPLLBZN

This is really interesting. I suspect there may be different reasons to take different approaches depending on surrounding CSS and elements.

A lot of UI work I do is experimenting with different ways to do things to find what’s cleanest for the specific situation.

Small note that the drag UX doesn’t appear to work on iOS.

Re: Next-level frosted glass with backdrop-filter

#37

Post by anamexis »

sureIy wrote: post #31
probabletrain wrote: post #25

Earlier quoted context omitted.

I think "tons of code and maintenance" is an exaggeration for this effect, once it's done you'll rarely have to come back to it. Many people value creating and using products with these kinds of details, I disagree with "don't use this in projects you intend to maintain" as across-the-board advice.

> is an exaggeration for this effect I disagree. Check the changes required to the spacing/sizing. Soon you will need to adjust those values and that.is.maintenance. Multiply this by each detail and soon you have more work than you signed up for. This is usually when someone comes along and wants a rewrite because the codebase is fragile.

Why would you need to adjust any spacing/sizing values for for the blur? There’s not much of anything to adjust.

Re: Next-level frosted glass with backdrop-filter

#38

Post by diroussel »

emmelaich wrote: post #9
ndesaulniers wrote: post #3

I like the fonts used on this blog!

Same! The cursive font is Cartograph CF. I thought at first it may have been (one of the) Playwrite fonts. See https://fonts.google.com/?query=playwrite

How did you come to that conclusion? I inspected the bold cursive text, and Firefox dev tools tell me it's "Sriracha".

https://fonts.google.com/specimen/Sriracha?query=Sriracha

Re: Next-level frosted glass with backdrop-filter

#39

Post by vintagedave »

I added this to https://cppbuilder.com/ which used to use a standard blur for the header background. It's very subtle, especially with the bottom border turned off, but I appreciate the knowledge of it being a 'better', ie a more real effect matching how real-world light or glass works. Feels like doing it right.

Firefox on Mac _may_ have a slight lag scrolling now which Chrome does not show.

Not mentioned in the article (that I saw) is that despite being a background blur it will affect all elements placed in the header, even with z-index higher than the blur, unless you mark them `position: relative;`. I added that style to my nav container.

Re: Next-level frosted glass with backdrop-filter

#40

Post by henriquez »

sureIy wrote: post #31
probabletrain wrote: post #25

Earlier quoted context omitted.

I think "tons of code and maintenance" is an exaggeration for this effect, once it's done you'll rarely have to come back to it. Many people value creating and using products with these kinds of details, I disagree with "don't use this in projects you intend to maintain" as across-the-board advice.

> is an exaggeration for this effect I disagree. Check the changes required to the spacing/sizing. Soon you will need to adjust those values and that.is.maintenance. Multiply this by each detail and soon you have more work than you signed up for. This is usually when someone comes along and wants a rewrite because the codebase is fragile.

If you're using a CSS preprocessor like SCSS or LESS you can just define the height for the toolbar as a variable and then use the mask area for the blur as a multiplier (eg. 1.88) of that variable. In general for making things easy.to.maintain it's better to not build project-wide stylesheets with raw CSS.
Post reply on HN