These effects are all pretty, but like... there should be some sort of media query for devices that are not that powerful (or their owners simply do not wish to burn through their batteries just to read a website). It gets pretty annoying that my phone slows down to a crawl when someone has these effects on their website. At the same time, simply opting out of the blurring and leaving everything else as-is is not a solution, since that may quickly render a lot of things unreadable.
Next-level frosted glass with backdrop-filter
41–50 of 67 posts
Re: Next-level frosted glass with backdrop-filter
#42Earlier quoted context omitted.
> 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.
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.
Re: Next-level frosted glass with backdrop-filter
#43These effects are all pretty, but like... there should be some sort of media query for devices that are not that powerful (or their owners simply do not wish to burn through their batteries just to read a website). It gets pretty annoying that my phone slows down to a crawl when someone has these effects on their website. At the same time, simply opting out of the blurring and leaving everything else as-is is not a s…
Absolutely. None of these look good to me. I would rather just have plain text. I wish all of these fancy sites would at least include a plain text / simplified reader mode by default. Front end stuff is getting way too over engineered .
Re: Next-level frosted glass with backdrop-filter
#44This 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.
> I disagree with "don't use this in projects you intend to maintain" as across-the-board advice
Backdrop-filter is... fine. Using masks, animations, and backdrop filter, and gradients, especially for fine details like edges, are just asking for trouble.
Browsers are incredibly complicated, and rendering engines have lots of edge cases, broken features, slight incompatibility issues some of which vary by hardware/os/enabled-flags.
IME, this would definitely not be worth it.
Re: Next-level frosted glass with backdrop-filter
#45This 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.
Exactly what I was going to say. Attention to detail is noticed by people, to the point that they may not necessarily even consciously know why they like one product over another when in reality they just subconsciously are attracted to products that are simply more polished.
Re: Next-level frosted glass with backdrop-filter
#46This is claptrap: "This effect helps us add depth and realism to our projects." -- when was the last time you, dear reader, saw frosted glass? Let's be real: it's because it was in iOS 7, Apple never moved on from that look and feel, and Apple is Apple. (n.b. a winking opinion, and a mild homage to Apple lore, not a genuine rebuke: https://folklore.org/Round_Rects_Are_Everywhere.html )
Lots of sites these days are using that frosted glass effect, I recall seeing it on the Linear site recently.
Re: Next-level frosted glass with backdrop-filter
#47I 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 one you suggest.
Re: Next-level frosted glass with backdrop-filter
#48Earlier 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.
Maybe just use CSS vars from the start? Doesn’t look like you really need to change anything but the containing element though.
Re: Next-level frosted glass with backdrop-filter
#49My 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.
Re: Next-level frosted glass with backdrop-filter
#50I 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...