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

61–67 of 67 posts

Re: Next-level frosted glass with backdrop-filter

#61

Post by vintagedave »

hulium wrote: post #58
vintagedave wrote: post #39

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 art…

Isn't it a bit unnecessary to add blur when the website is almost completely black? Maybe put some screenshots on the page.

You're probably right, but I enjoyed the effect as text and graphics slid under the header. Originally I was going to have the header and page different colours.

I may add more graphics soon!

Re: Next-level frosted glass with backdrop-filter

#62

Post by vintagedave »

zipy124 wrote: post #50
vintagedave wrote: post #39

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 art…

The scrolling lag also makes it unsuable on Firefox mobile, my s24 ultra chugs hard on the top part of the website...

Thanks. I reverted the code. A simple blur-behind is significantly faster.

Re: Next-level frosted glass with backdrop-filter

#63

Post by vinnymac »

joshwcomeau wrote: post #47
chrismorgan wrote: post #13

I don’t like the `height: 200%`: you might as well be specific about how much extra you need, because an extra 100% might be a lot more than you need, or not enough. First question: how much more do you need? Per https://drafts.fxtf.org/filter-effects/#funcdef-filter-blur (via MDN blur() docs → link to spec): > Note: A true Gaussian blur has theoretically infinite extent, but in practice all implementations use a fin…

Author here — yeah, so my goal with 200% was to make the code as comprehensible as possible. My actual glassy header does something quite similar to what you’re suggesting, but that also raises the bar quite a bit for how much CSS you need to know in order to understand this post. I like making things like this copy/pasteable, rather than NPM-installable, so that more experienced developers can make tweaks like the o…

Your effort to make these posts consumable by the masses doesn’t go unnoticed. It’s clear you put a great deal of work into them, and the quality you achieve raises the bar in many ways for what to expect when learning about the web. If only all educational materials on MDN could reach these heights.

Re: Next-level frosted glass with backdrop-filter

#64

Post by emmelaich »

diroussel wrote: post #38
emmelaich wrote: post #9

Earlier quoted context omitted.

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

I used Chrome devtools! Computed style is:

   Family name: Cartograph CF
   PostScript name: CartographCF-RegularItalic
   Font origin: Network resource(16 glyphs)
Same result in Firefox for me. MacOS Sequoia.

Re: Next-level frosted glass with backdrop-filter

#65

Post by Sateeshm »

jchw wrote: post #52
zipy124 wrote: post #49

My Samsung s24 ultra chugs at like 10fps or lower when scrolling on this site. Needless to say I won't be taking recommendations from the author, if I can't use their website smoothly on one of the most Powerful phones on the market.

Interesting. This page is easily max framerate on my Pixel 4a, which I'd expect since the effects should be hardware accelerated fairly easily...

Fellow 4a user (best small phone ever). It's perfectly fine for me too.

Re: Next-level frosted glass with backdrop-filter

#66

Post by henriquez »

ksymph wrote: post #42
henriquez wrote: post #40

Earlier quoted context omitted.

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.

You don't even need a preprocessor for that with var() and calc(). It's perfectly possible to write clear and easily maintainable raw CSS nowadays.

It's not universally safe to use CSS nesting yet. Without nesting support, writing raw CSS is like raw-dogging a sex-trafficked Vietnamese prostitute from Malaysia. Sure, it will probably work, but if your goal is zero maintenance then you're ignoring the post-exposure prophylaxsis and antibiotic regimens necessary for typical usage patterns.

Re: Next-level frosted glass with backdrop-filter

#67

Post by chrismorgan »

joshwcomeau wrote: post #47
chrismorgan wrote: post #13

I don’t like the `height: 200%`: you might as well be specific about how much extra you need, because an extra 100% might be a lot more than you need, or not enough. First question: how much more do you need? Per https://drafts.fxtf.org/filter-effects/#funcdef-filter-blur (via MDN blur() docs → link to spec): > Note: A true Gaussian blur has theoretically infinite extent, but in practice all implementations use a fin…

Author here — yeah, so my goal with 200% was to make the code as comprehensible as possible. My actual glassy header does something quite similar to what you’re suggesting, but that also raises the bar quite a bit for how much CSS you need to know in order to understand this post. I like making things like this copy/pasteable, rather than NPM-installable, so that more experienced developers can make tweaks like the o…

Honestly, I feel that `bottom: -32px` and `calc(100% - 32px)` might be easier to understand than `height: 200%` and `50%`. (Yeah, for early teaching I might step back from using `inset`.) It does require the one extra concept of calc(), but it’s exact and feels slightly more easily explicable than how 50% of 200% is back to 100%. The fact that the number 32 would be present in both makes it easier to track, whereas the fact that 200% and 50% are inverses is pretty easily overlooked.
Post reply on HN