Pure CSS Hidden Footer

I’ve got a pretty neat CSS trick for you today. It’s a hidden footer, a footer that reveals itself as you scroll down. Here’s a demo of what I’m talking about:

Check out this Pen!

Pretty neat, eh? Let’s get started.

Basics

We’ll start with the HTML. It’s pretty basic, there’s not a whole lot to explain here.

<section role="main">
<h1>This is a really sweet web demo.</h1>
<p>You don't have to take my word for it either. Just scroll down.</p>
</section>
<footer role="contentinfo">
<h2>HIDDEN FOOTER! Yeah.</h2>
<p>By <a href="http://twitter.com/tjacobdesign">@tjacobdesign</a></p>
</footer>

A section and a footer. You need both of those containers, but the contents can be whatever you want them to be.

And the CSS:

[role='main'] {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0;
  padding: 15px;
  background: #333;
  color: #55BADA;
  height: 100%;
  /* however tall the footer is */
  margin-bottom: 200px;
}
/* this is the spiky border */
[role='main']:after {
  content: '';
  position: absolute;
  left: 0; bottom: -3rem;
  font-size: 0.3rem;
  background:
    linear-gradient(135deg, #333 25%, transparent 25%) -3em 0,
    linear-gradient(225deg, #333 25%, transparent 25%) -3em 0);
  background-size: 3rem 100%;
  background-color: transparent;
  height: 3rem;
  width: 100%;
  border: none;
  margin: 0;
}

[role='contentinfo'] {
  height: 200px;
  width: 100%;
  background: black;
  padding-top: 1em;
  color: white;
  position: fixed;
  bottom: 0; left: 0;
}

What’s going on?

There are a few wacky CSS techniques that we’re using here.

The most important of those is the use of positioning. The footer is fixed, which means that it is permanently stuck to the bottom of the screen. Normally that would be a useability nightmare, because the user wouldn’t be able to see half of the screen. Fortunately for them, that isn’t all we’re doing.

We’re also positioning the role='main' section relatively. That allows us to use z-index, which is what we do, placing the main container above the footer. And that's what gives us the “pull up footer” feel. We’ve also set a margin-bottom at the same size as the footer, so that we can scroll down far enough to reveal the footer.

And that’s about it for this one! Go make something amazing with it.