I’ve seen two kinds of sticky footer solutions: The css version that requires an extra div and a fixed height footer, and the javascript version that positions the footer on the fly. Neither of them feel quite acceptable to me. A fixed height footer is completely out of the question with changing content, and I hate unnecessary inline styling with javascript. I have no idea how I’d go about fixing the css method, I think someone would have fixed it by now if it could be fixed. So I tried rolling my own script.

Three requirements

• No inline styles set with javascript
• No restrictions on footer css
• No predefined markup

…and one nice to have

• A jQuery plugin

Results

Download the plugin, or fork it at github and make it better. There’s probably some useless boilerplate jQuery plugin cruft that could be gotten rid of. The gist of it just the updateFooter function, which you could use just as easily without the whole plugin.

Basically what the plugin does is this: When when the document is longer than the viewport, the footer is just the footer, nothing happens. But when there’s room at the bottom, the footers gets a class of sticky, and can be styled accordingly. The obvious thing to do is this:

.sticky {
  position: absolute;
  bottom: 0;
}

I haven’t yet encountered any weird edge cases where the logic blows, they’re probably out there, but for now, I’m happy with my footers again.

Most css tabs I’ve seen seem to rely on having a bottom border on the list containing the tabs, and nudging the active tab down to cover the bottom border. Here’s a simple example. Works just fine, but has always felt a bit wrong to me. I wanted there to be an actual gap in the border below the active tab. Turns out achieving that is pretty easy using ::before and ::after pseudo-elements. As a side effect, you can actually have completely transparent tabs, since there’s no need for a solid color background on the active tab to cover over anything.

Open up the demo if you’d rather follow along with a live example.

The html is just a basic list with links:

<ul class="tabs">
  <li><a class="tab" href="#">Tab 1</a></li>
  <li><a class="active tab" href="#">Tab 2</a></li>
  <li><a class="tab" href="#">Tab 3</a></li>
  <li><a class="tab" href="#">Tab 4</a></li>
</ul>

Onto the css. First off, let’s take care of the layout:

.tabs {
  list-style: none;
  padding: 0;
  overflow: hidden;
}
.tab {
  display: block;
  float: left;
  padding: 10px;
}

Just removing the default padding and bullets of the list and floating the links so the list will lay itself horizontally. Note the overflow: hidden on the list, it’ll keep the generated bottom border from expanding outside the list. Let’s give the active tab a border, so it’ll look like a tab:

.tab.active {
  border: 2px solid rgba(0,0,0,.2);
  border-bottom: none;
  border-radius: 4px 4px 0px 0px;
  position: relative;
}

Also note the use of position: relative;. With that we can position the ::before and ::after pseudo-elements with position: absolute based on the tab instead of the document. The only thing left is to give the tab list the bottom border with a gap, like so:

.tab.active::after,
.tab.active::before {
  display: block;
  content: '';
  position: absolute;
  bottom: 0px;
  height: 0px;
  width: 999em;
  border-bottom: 2px solid rgba(0,0,0,.2);
  pointer-events: none;
}
.tab.active::before {
  right: 100%;
  margin-right: 2px;
}
.tab.active::after {
  left: 100%;
  margin-left: 2px;
}

Both pseudo-element are declared as blocks, they come into existence with content: '' and get positioned relative to the active tab, with the same border style as the tab has. With bottom: 0 and right: 100% the right bottom corner of the ::before gets positioned at the bottom left corner of the active tab. From there on, it extends enough beyond the width of the tabs container so it’ll effectively be a bottom border for the whole left side of the tabs. Same goes for the ::after, but to the right. And there you have it, a generated border that has an actual gap where the active tab is. Here’s the complete demo to play around with.

With just a single css transform declaration.

If an elements dimensions are not even by even, or odd by odd, a 90 degree rotations will result in blurry edges by default.

To achieve pixel perfect 90 degree rotation, the rotation pivot (transform-origin) point needs to be at exactly the center of a pixel, or exactly at the corner of a pixel. By default, it’s at the center of an element and placed with subpixel accuracy. Thus if the element has an even width and an odd height, or vice versa, the pivot is at the center of a pixel in one direction, and at a pixel border in the other direction. This applies to both Photoshop and CSS. Here’s an illustration of the issue:

Notice how after the rotation, the edges of the box are halfway between pixels, in the real world, this renders as blurry lines.

So, how to achieve pixel perfect rotation regardless of where you want your pivot to be and regardless of element dimensions, with css?

• Set your pivot explicitly in pixels: transform-origin: 50px 50px;
• Make a 1px × 1px sized wrapper that has its pivot at center center or any corner and rotate that.
• Use percentages calculated from your elements dimensions. This is my preferred method for elements with dimensions I can be sure of, since you can set the pivot to be at the center of any pixel, or at the corner of any pixel without an extra wrapper.

Live example

I made a dabblet to show you actual working css, but tumblr doesn’t seem to allow iframes in posts, so go look at that link.