If you think frosted glass effect in CSS, you probably think of the backdrop-filter property. Just backdrop-filter: blur(10px); will do the trick. I still think the look is kind of cool and fresh, but I should check myself a little here as the effect was popularized in the iOS 7 release which was 10 years ago 🫠.
Here is a fresh take though: Frosted Glass: Depth-based blur in CSS (make sure to mouse around to see the dynamic effect, and scroll down to see the effect on different backgrounds).
The how-to is that layered blurs are masked and the mask moves with the mouse. I love clever stuff like that, which ends up fairly simple.
The above demo is a nice demonstration of masking, actually, because it’s doing something that is uniquely mask-y: using a gradient. The other concept that can cut out parts of something is a clip-path, but with a clipping path, any given part of an element is either clipped or not, whereas with a mask, an area can become partially transparent.
Ahmad Shadeed has a recent article on CSS Masking that does a good job of explaining how it all works and what you can do with it.
There is this little design concept that if you have nested elements that both have border-radius, they can’t have the same border-radius otherwise they tend to have a weird little hump in the middle and essentially just look off and not particulary professional. I wrote about this in 2011 and have had many people thank me over the years! (not that I’m the first.)
The general thinking is that you subtract one from the other, and it comes up from time to time. Adam Argyle recently noted that there is a way to solve this with no math at all, but it’s Chrome-only at this time.
This uses overflow: clip; and overflow-clip-margin: content-box; which this is the first I’m hearing of the latter! I like it!
I feel like we’re doing a good job of talking about paths this week so lemme slip another one in here: Jhey’s Circular Text with CSS?. To be clear: there isn’t a normal first-class CSS citizen kinda way to say “set this text on this path”. Unless that path is a straight line, I suppose. SVG has the <textPath> element and that’s really what you want here if you’re going to this even semi-seriously. But there is some trickery to be had here!
This makes me feel like Captain Old again saying I wrote about this in 2012, but here we are. The trick then was to break the text into individual character <span>s and then transform them all around a shared origin:
Jhey’s idea still uses a monospace font and breaking the characters up into spans, but there is more clever math involved. He’s got it set up so however many characters you use, the complete one full circle no matter what. The secret is trigonometric functions, which are only freshly available in CSS. Plus he took the time to make sure there is screen-reader-friendly text in there too, as text-as-spans is a nightmare that way.
If you read all the stuff above and felt some version of ughkg CSS is so hard, maybe you’ll find some solace in Mike Aparico’s Why we’re bad at CSS. Part of Mike’s point is that CSS gets harder the more you try to avoid it, or apply abstractions that are too heavy-handed.
We want our styles to be generic enough to reuse in different contexts but not so generic that we have to constantly repeat ourselves in those contexts.
I feel like there is a tendency for people who feel like they have a handle on CSS to have essentially invented their own methodology (whether they choose to share it or not). That might seem like a failing of CSS or something that you need to invent your own system to be effective with it, but ultimately I think that’s true of any language. You build up your own ways of doing things that works for you and run with it.