CSS

Microsoft is working on “gap decorations” and have put together a nice playground to explore them, and I had a play. The idea is drawing lines where gaps would be, rather than empty space. It’s really quite well done with lots of control (do they hit the edges or stop short? do they overlap or […]

You’ve got A LOT of control over the design of select menus now, and it can be done as a progressive enhancement.

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

The CSS corner-shape property (very new! only in Chrome Canary!) is useful in basic use cases, for advanced shape making, and the superellipse() function is *extra* powerful.

We’ve got @scope in CSS now, and it’s got it’s uses. But the concept of scope in CSS is a wider idea.

There are several different ways to do equal width columns. But some are, uh, more equal than others.

scroll-timelines go from 0 to 100. Many variable fonts axis have similar ranges, like 100 to 900. Surely that’s begging for interplay.

You might as well really understand height and Josh Comeau has your back here. It’s really quite different than width and perhaps less intuitive. Plus when grid and flexbox get involved, things change.

We’ve been trying to make the point around here that the new shape() in CSS is awesome. It’s the powerful <path> in SVG ported to CSS so it can use actual units. It’s probably how path() should have ported to begin with, but c’est la vie. I’ll make the point in this demo. Resize those […]

We can pass the mouse position from JavaScript to CSS and use it to make unusual and playful effects.