CSS

Sometimes pretty simple HTML elements have a lot of things to consider and take care of, from interactivity, styling, accessibility, and more.

I’m not the world’s biggest fan of LQIP’s (low quality image placeholders) generally (doing nothing other than handling aspect ratio is… fine), but I really like how much creativity it inspires. I’ve seen a ton of different approaches to it over the years, that all use different technology and all have different advantages and disadvantages. […]

Last we checked in with how the web platform was planning on helping us with “masonry” layout, it was a versus battle between “just use grid” and “make a new layout type”. Now Apple folks have an idea: a new shorthand property called item-flow. Nothing is decided here (I don’t think), but it seems very […]

Do you need it? Not really, custom properties are probably a better bet. But it still has a bit of utility and it’s fun to think about.

Now that we’re starting to be able to apply types (like `number`) to values of attributes we pull of HTML elements in CSS, doing interesting things with is easier.

Using hard color stops with `repeating-conic-gradient()` and the double-stop syntax, we can pretty easily create a burst background. Then get fancier.

These buttons animate from a square to an arrow, and we look at three different ways to do it, each with their own upsides.

Shadows don’t have to be used for… shadows. Inset shadows can layer over backgrounds and because they are animatable, it’s just another tool for drawing what we want to the page.

Chrome 135 (in Beta as I write, probably stable early April?) will have customizable select elements in it. You opt-in to it in CSS, and once you have, you can go ham on styling regular ol’ <select>, <option>, ‘n’ friends elements. Very progressive-enhancement friendly as a select without custom styling is… fine. It’s interesting and […]

Being able to control the `paint-order` in CSS means you can push the stroke behind the fill, fixing awkward issues with ruining letterform readability.