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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s