Reminder that `system-ui` is well supported, when you use it on macOS you get San Francisco which is a variable font, which is fun, and the fallbacks are pretty good.
You can get pretty darn flexible with it.
You can get pretty darn flexible with it.
View Transitions block interactivity (like clicks) while they are running. Maybe you don’t want to do that.
I had fun with the post about making a link to a random post in just HTML/CSS the other day. But I was almost certainly over-thinking it on the original. Using random() was kind of the point, so we can stick with that.
Includes background-clip for masking backgrounds, vertical-align for aligning elements, box-decoration-mode for consistent edge styling, letter-spacing for spacing control, and text-combine-upright for vertical text layouts.
You normally don’t think of images as overflowing themselves, nor can you put anything else inside to make it overflow, but actually…
Perhaps this theoretical button wasn’t a button at all, but 50 links in a trenchcoat.
Certainly it isn’t the *only* way, but you’ve got a lot of angular control with conic-gradient() and it’s fun to work with.
Here’s an example. You can list multiple comma-separated box-shadows, but if you apply a *new* box-shadow, it overrides anything set before. Not true here.
Masonry.js was famous for creating, uh, Masonry layouts. But it did something else, too: animate fluid grids. Here’s a way to get that in native CSS as well as the layout.
A dozen years go by, it turns out we can do things a lot differently and a lot better. Here a `scroll` event is entirely replaced by HTML and CSS features and much better performance.
Master.dev donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.