CSS

CSS allows setting different overflow behaviors for x and y directions. It doesn’t actually work with the `hidden` value, but it does with `clip`!

CSS has linear, radial, and conic gradients, that can all do interesting and complex things… but not quite this, at least not on their own: That’s what we’ve been calling a Mesh Gradient. There are all sorts of ways to pull it off, like using multiple backgrounds with radial gradients placed at different locations, or […]

Philip Walton for Google responded to our question We’ve Got Container Queries Now, But Are We Actually Using Them? There are a variety of reasons why usage of them seems to be low, but certainly developers worried about browser support is still a factor. The biggest quoted concern is Safari 15, which is entirely reasonable. […]

The navigation in this game works with the arrow keys, which is made possible with scroll driven animations, faked collision detection, and maintaining state with CSS custom properties.

The website has the most control, since that’s what applies the CSS. But browsers also have a Dark/Light/System setting, and that can fall through to the OS/Device.

I’m such a :has() selector fanboy in CSS. We’ve covered it many times. But Bruce Lawson goes as far as to call it “The God Selector” because: [It] is omnipotent because it doesn’t require any structural relationship between the thing being checked and the thing being styled. In other words, you can select any element […]

This article explores creating a typographic effect that “reveals” text in an interesting animated way.

Especially on mobile, the slide-out drawer UI/UX seems like a perfect fit for a popover, and works fine on desktop too.

Good observation in Bytes: … new CSS-in-JS libraries are popping up like it’s 2017 all over again. Panda came out last summer, Meta open-sourced StyleX in December, Material UI released PigmentCSS last month, and Restyle just launched a few weeks ago. It’s likely that server-side rendering screwed up the original “batch” of these tools. That, and, ya know, just using CSS is […]

Setting text on a circle in CSS isn’t straightforward, but it is possible with some effort. This technique splits text into segments and uses transforms and perspective to pull it off.