The tutorial itself is next level with stunning interactive visual story telling.
All of Josh's tutorials are like this. Check out some of his others!
Next-level frosted glass with backdrop-filter
21–30 of 67 posts
Re: Next-level frosted glass with backdrop-filter
#22Josh your work is amazing
Re: Next-level frosted glass with backdrop-filter
#23The technique is interesting, but every time I see this effect, I can't help but feel like 2010 is calling and wants its UI design back.
Brushed metal for me, thanks.
Re: Next-level frosted glass with backdrop-filter
#24This 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.
Re: Next-level frosted glass with backdrop-filter
#25This 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.
Re: Next-level frosted glass with backdrop-filter
#26> Application error: a client-side exception has occurred (see the browser console for more information).
A bit too "next-level" for my iPad it seems.
Re: Next-level frosted glass with backdrop-filter
#27Re: Next-level frosted glass with backdrop-filter
#28This 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'm not a UX person so I'd rather use something already made that looks good.
Re: Next-level frosted glass with backdrop-filter
#29I 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…
All this time I thought a 16px gaussian blur meant it faded to 0 at 16px. That explains why I always seem to need to add some extra padding! I never thought to question it! Wow! I can use this right away to fix some stuff, thanks for sharing!
Thanks for the response! It’s always nice to know when some incidental thing you remark on has helped someone. Thinking back, I suppose I struggled with understanding the SVG parameter when messing around with complicated filters in Inkscape a few years back, for much the same reasons. And I didn’t actually know the ¾√2π until today, I just knew that a factor of 2 was a little more than enough. I’m glad for the note being attached to the spec, it’s a great note.
Although people often talk of blur radii, it might help to remember it’s a standard deviation. Take the curve in https://en.wikipedia.org/wiki/Gaussian_filter#/media/File:Ga..., and a Gaussian blur is taking so much of each pixel value, most from the closest ones, less from further away, negligible by two standard deviations away, but only asymptotic to zero; hence the “theoretically infinite extent” the spec note mentioned. But the ¾√2π thing will probably be good enough forever.
Re: Next-level frosted glass with backdrop-filter
#30This 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