Responsive sticky footer woes and fixes

Over the years, I must have used about a dozen different approaches to coding up a sticky footer, with varying degrees of success. I recently stumbled upon an elegant CSS3 solution and immediately put it to work on the theme on this site. But then I discovered some problems. Here’s how I fixed them.

What’s a sticky footer?

Alright, let’s say you’ve got a design that involves a big, chunky footer like the one on this site. If you have a page or a post that’s light on content, maybe just a few lines (like my contact page) and your site visitor happens to have a tall browser window, you don’t want that big footer hanging out in the middle of the screen. You want it down at the bottom of the browser window.

yes-no

That is the art of coding a sticky footer. Continue reading

Eight tips for improving responsive typography

Don’t underestimate the importance of well-done typography in making a website appear more professional, polished, and just plain nicer. But in the world of responsive design, we need to have a few extra tricks up our sleeve for accomplishing gorgeous web type. Here are eight things you can do to improve typography in your responsive designs: Continue reading

Animate text over images on hover without JavaScript

A couple of months ago, I published a tutorial showing how to show text over images on hover without using JavaScript. When I presented to an HTML5 Meetup Group a couple of weeks ago, I took that idea and ran with it, adding some extra special animations, and I’ll show you how to do it too. Here’s what we’ll be creating:

There are three animations happening simultaneously when you move your mouse over each image:

  1. A zoom effect on the image itself, created by scaling the image up 140%
  2. The text and its transparent black background fading in
  3. The text dropping in from the top

You’re free to use all of the animations or to remove 1 or 2 of them – it all depends on how you’d like your final product to look. Let’s take a look at how to accomplish this. Continue reading