The Slideout Footer

Celý článek

A fascinating new site called The Markup just launched. Tagline: Big Tech Is Watching You. We’re Watching Big Tech. Great work from Upstatement. The content looks amazing, but of course, around here we're always interested in the design and tech as well. There is loads to adore, from the clean typography, interesting layout, and bold angled hover states on blocks, to the tasteful dots motif.

The footer is clever as well, in how it appears to slide out from underneath the content as you scroll to the bottom of the page. Let's make it!

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.

That last one is the fanciest trick, and it's actually fancier than The Markup does it. They use position: fixed; on the footer and a magic numbermargin-bottom on the main content to make it work. No magic numbers needed when going sticky.

The fact that that works so easily without magic numbers is pretty rad. Thanks to Stephen Shaw for the sticky trick! My first crack at this used fixed positioning and magic numbers, but it's so much more usable without that.

Preethi showed us a super similar technique in 2018. The main different here is using a linear gradient on the body's background, which is a nice workaround if applying a solid color is somehow limiting to the overall design.

The post The Slideout Footer appeared first on CSS-Tricks.