Howdy, everyone! Stay well out there.

[Robin]: One of the niftiest layout effects I’ve seen in quite a while has to be the footer that slides out from the bottom of The Markup. Chris calls this technique The Slideout Footer, and in that post, he looks into how they made this simple but rather lovely thing:

Here’s the trick:

1. The main content area is at least 100vh tall. Most sites are anyway, but just to be safe.
2. The main content area has a solid background as well, which covers the footer we’re going to hide behind it.
3. The footer comes after the main content area in the HTML, so to make sure the main content area sits on top, you’ll need a little relative positioning and z-index.
4. The footer uses sticky positioning to place itself on the bottom.

Let’s start this week’s newsletter with conic gradients: they’re super neat! And they’re coming to a browser near you! Available in Chrome and Safari today (coming to Firefox soon, and also polyfillable), they’re an interesting addition to what’s possible with CSS these days.

The idea is that we can make gradients in a way that we haven’t been able to before and this opens us up to a bunch of interesting design options. Not so long ago Geoff wrote about how to use them and showed how we can make the following design now with just a single line of CSS:

.conic-gradient { background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); }

Just like we can create hard color stops with other types of gradients (e.g. how we can make stripes with linear-gradient) we can do the same with conic-gradient. That makes pie charts a pretty solid use case:

But of course, you can get weird too.