📝 CSS-Tricks 191: Slideout Footer, Nice Patterns, and Isolation

View this newsletter on the web.

[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.

📝 This Week in Web Design and Development

View this newsletter on the web.

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.

📝 This Week in Web Design and Development

View this newsletter on the web.

First up, Chris and Dave redesigned the site for their mighty fine podcast, The ShopTalk Show and I can’t remember the last website where I ooo’d and aaa’d over it as much as this one. The design is inspired by old ASCII art so that typographic elements like equals signs or stars make up the borders between things.

Not only that but it uses a pixel font called Unibody 8 that I love the look of, especially at smaller sizes. There’s also some nifty stuff going on with those headers if you take a look under the hood…

📝 This Week in Web Design and Development

View this newsletter on the web.

To kick things off this week, here’s a great post about how to add a gradient overlay to text with CSS. Sarah L. Fossheim walks through it all and I think it’s worth adding this technique to our toolbox since I don’t see this effect enough on the web:

Here’s a particularly nifty use of it in an animation for a button hover effect that Sarah shows off at the end of the post:

As I was looking through Sarah’s work I found another great post about how to recreate a Polaroid camera with CSS gradients. In this post, Sarah shows how that project got started and looks at each bonkers step along the way of making this absolute gem: