background-clip

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

Jen Simmons introduces the hot-off-the-presses background-clip: border-area; which can produce some pretty compelling and real-world designs with a few lines of sensible CSS. I suspect our recent background-clip trickery would be simplified with this new value because we wouldn’t have to put a fake background over the padding-box to get the effect.

You can limit how far the background-image of an element applies by using background-clip. That means you can apply *different* backgrounds to, say, the padding and border.