Ana Tudor

I recently came across this CodePen demo by Vivi Tseng, which creates the blur extension effect by placing a square div with a blur() beneath the img element and I couldn’t help but think a simpler solution should be possible with a single img element and minimal CSS. So let’s first take a look at […]

Having a width-limited centered column of content is common and good, but what do you do when you need to break out? It’s not hard these days, but it does depend on the situation.

Inset `box-shadow` doesn’t work directly on image elements. There are work-arounds, but this SVG filter can do it directly.

Don’t run! There is powerful stuff to learn here through interactive demos.

An underdog media query, resolution queries, comes to the rescue here in defining radial gradients that don’t blur or get the jaggies.

The whole point of auto-fit and auto-fill is that you aren’t saying how many columns to use. But if you knew how many the browser chose, you can make nice design decisions.

A deep dive into producing an interpolated “gradient” of colors from just two provided colors.

This is about reducing banding effects in gradients by introducing noise. A nice approach is a displacement map using SVG filters.

It was a lovely day on the internet when someone asked how to CSS animated gradient text like ChatGPT’s “Searching the web” and promptly got an answer saying “Have you tried asking ChatGPT? Here’s what it told me!” – well, maybe not these exact words, but at least it rhymes. Both the question and this […]

Container units (e.g. cqi) are only able to reference the closest container. But if you register a custom property and set that higher up, you can get your hands on other containers units.

`box-decoration-break: clone;` in CSS can help us make for interesting backgrounds across lines of text that break, but when opacity gets involved, things can get complicated.