Chris’ Corner: Can Has Blurs, Filters, and Masks

By admin
You’ve seen CSS’ new :has() selector right?

There are all these “basic” use cases that leave me smiling because the solutions of the past were inelegant at best, and now are easy and satisfying. Here’s one:

You want margin below your <h2> … unless there is a <time> right below it, then no margin … but put the margin below the <time> instead.


One
CARDINAL

approach to this with :has() is just a few lines and reads very clearly to me:

h2 { margin-block-end:

1.2rem; &
MONEY

:has(+ time) { margin-block-end:

0
CARDINAL

; } &:has(+ time) + time { margin-block-end:

1.2rem
CARDINAL

; } }

But as I mentioned, that’s a “basic” use case. The power of :has() is very deep, as it allows for inspection from any

DOM
ORG

element down the tree, then moving as far back up as needed. It’s a bit hard to wrap my mind around that sometimes. Like

Jim Neilsen
PERSON

said:

I feel like lots of people have their own little oh yeah! moments with this CSS feature.

Michelle Barker
PERSON

blogged a few of them, including an interesting combination with the :target selector. Does a certain “have” an element that is targetted? Yes? Animate the grid to reveal an otherwise hidden area:

Poking around my own code bases, I can see it starting to sprinkle in. It’s interested to see when it comes to unknown data coming into templates. Here’s a JSX example:

<div class="things"> {things.map(thing => { return( <div class="thing"

key={thing.id
NORP

}> <h3 data-category={thing.category}>{thing.name}</h3> {thing.text} </div> ); }) </div>

Here I’ve spat out a total arbitrary list of “things”. I found it most useful to have the data-category attribute on the header, as direct styling with that was useful. But what if the parent needs styling based on that? Easy:

.thing:has([data-category="widget"]) { background: yellow; }

More, what if the entire group needs a special style? And if it does, make all the headers smaller?

.things:has([data-category="widget"]) h3 { font-size:

80%
PERCENT

; }

Go down, then back up!

I’m even very-mindblown-y on the idea that quantity queries are now easy. Does this list have

at least 11
CARDINAL

items in it? Yes? Then do something:

ol:has(li:nth-child(11)) { color: red; }

Get out of dodge.

We’ve had blend modes in CSS for a while. You use mix-blend-mode when you’re trying to blend an elements content with it’s background. You use background-blend-mode when layering backgrounds and wanting to blend those.

It still strikes me as a surprisingly cool thing we have access to directly in CSS. And it’s niche enough that when I see it used, it’s usually a pleasant surprise.


Brad Woods
PERSON

has an awesome article showing off how they work. Interactive examples really does blending justice here.

Those look dramatic, but blending can be rather subtle.

Brad
PERSON

has all sorts of other examples like blending gradients over images, blending textures, blending patterns, that all end up quite nice and the fact that they are programmatic just feels cool and powerful.


Koding Kitty
PERSON

has a similarly good explanation page, specifically using provided

Tailwind
PRODUCT

class names to do the blending over top a single-color icon. I always thought

Robin
PERSON

did a good job on the old

CSS-Tricks
LAW

page as well.

You know what I always think of with blending, though? It’s not a CSS property that you just learn and then you know it. All you can learn is the general category of what it can do and the circumstances it might be useful. Then, you have to guess and test your way to a good outcome.

One
CARDINAL

might argue a lot of CSS is that way, but I feel like blending is particularly this way.

Speaking of excellent interactive tutorials!


Artur Bień
PERSON

is all over it in

Blur Vignette
WORK_OF_ART

effect in CSS.

How would you pull of this in CSS?

Quickly, it’s to layer

two
CARDINAL

copies of the image, blur the top one, and use a mask to only reveal the edges of the blurred version. The hard part is crafting the mask.

Artur
PERSON

does it with

6
CARDINAL

layered gradients which gets the effect just right.

Don’t miss the

Windows
PRODUCT

98-ish interactive demo at the bottom which lets you totally control different aspects of the effect.


Artur
PERSON

is the master of getting these kind of details right. Check out this quick screencast video he tweeted about getting a “glass overlay” effect just right. I’d be like “that’s what backdrop-filter is for!” That’s in there, but it doesn’t account for the, as

Artur
PERSON

puts it:

In reality we see glass objects reflecting light even before they are placed directly between our eyes and the light source.

Well we’ve touched on filters, blending, and masking, I suppose it’s not out of line to hit shadows too. I enjoyed

Preethi Sam
PERSON

’s thinking differently in

A Few Interesting Ways To Use CSS Shadows For More Than Depth
ORG

. Shadows can have properties that make them quite un-shadow-like, like having

zero
CARDINAL

blur, being inside an element, being whatever color you want, and even being layered. Like how good are these hovers?

Nothing wrong with using shadows for shadows though! I ran across boxshadows.xyz

the other day
DATE

and it’s a pretty nice tool for doing layered shadows that have a better depth effect than any one shadow alone can do.

I just love that sort of look. It’s intense looking in that exact example, but a slightly more subtle version with a bigger shadow behind and a slight lighting effect inset on top is just a really juicy effect that works well on the web.

You know what else is hot right now? Blurred and colored blobs as backgrounds. As ever, you can make those as images and use a background-image (I’ve seen

Figma
ORG

plugins like this and this). But it’s fun to do programmatically of course as you can color them as needed, make different sizes, and even animate them.


Andrew Walpole
PERSON

took a crack at it with Glowing Blurred Backgrounds with CSS. The filter property does the heavy lifting getting the blurryness going, but getting the shapes together in which to blur is very clever.

Below the (left) turns to the (right).