Smashing Magazine we smash you with the information that will make your life easier. really.

CSS-Based Footers: Modern Solutions

January 9th, 2007 in CSS | 58 Comments

Every design element deserves particular attention in Web 2.0. Navigation menus, forms, comment forms, comment designs, tables, typography, fonts, even more fonts and even download buttons are designed in more detail to make a good first impression. The smallest things can make a big difference - one of those smallest things are footers, used to visually close the content of a page; however, as you’ll see below, sometimes they also have some more functions.

Published in CSS, January 9th, 2007
Tags: footer, galleries, techniques, tutorials, web 2.0

1.

Derek Punsalan (January 9th, 2007, 12:46 pm)

Nice collection. I’m definitely going to make it a personal goal to make the footer the center of attention on my next personal project.
- Comment
2.

Webstandard-Team (January 9th, 2007, 3:55 pm)

A “Footer” is able to be more than just a line ;o) Very nice “Footer-Collection”!
- Comment
3.

add (January 9th, 2007, 4:59 pm)

i like footers which are out of the ordinary, but we have to be carefull not to atract user’s attention off the content, so we don’t want bright colors and mouving things in the footer.
- Comment
4.

Sergio Gandrus (January 9th, 2007, 5:27 pm)

Nice footers? It depends on your goal.
For a clean and light design you need a different color and few informations.
As this site does…
- Comment
5.

jalansutera (January 9th, 2007, 6:51 pm)

should our readers pay attention more to our footer? how many readers pay attention to footer?
- Comment
6.

xaxaxa (January 10th, 2007, 12:01 am)

Nice footers. Good review.
- Comment
7.

Slaff (January 10th, 2007, 12:07 am)

Very cute collection =). Thanks for sharing & doing that great work for us ;)
- Comment
8.

3gtoweb (January 10th, 2007, 12:58 pm)

谢谢你的分享！从中受益很多，thanks for a lot!!!
- Comment
9.

Jamie Phelps (January 11th, 2007, 1:50 pm)

The title of this article while technically correct isn’t as accurate as it could be. Your collection here is impressive and inspiring, but most of them are simply background images. Indeed, CSS makes the background images possible, but many of them are simply the same footers we see around less impressive designs with better background images.

A couple of sites in the list including nuwen.com and ndesign-studio.com are actually impressive uses of CSS in the footer. ndesign-studio.com’s use of contrasting colors, borders, hover styles, and background images as link icons is indeed great CSS. nuwen.com’s css is even better because it uses no background images but creates a great visual effect of columns using simple padding, margins, and borders.

I would like to see this list revised to really ferret out those sites that are truly using CSS rather than just images to create impressive footer effects.
- Comment
10.

ChrisB (January 12th, 2007, 5:50 pm)

Thanks for another simple but authoritative artical. With your help I am swiftly building up a store of written ‘proof’ about issues I have been trying to get through to clients and bosses for years!
- Comment
11.

OverZero.it (January 15th, 2007, 5:51 pm)

Very interesting!
Thank you.
- Comment
12.

Mary (March 2nd, 2007, 6:41 am)

You didn’t show one of the cutest footers around.

Link [happytreefriends.atomfilms.com]
- Comment
13.

jamjammo (March 20th, 2007, 4:35 pm)

Would it be safe to state that i have a foot fetish?
lol
- Comment
14.

Stefan (July 24th, 2007, 4:20 am)

Thanks for this article a lot :) gave me a whole lot of inspiration!
- Comment
15.

habr (August 26th, 2007, 3:17 am)

Very cute collection of footers. Thanks for review.
- Comment
16.

Syed Balkhi (August 29th, 2007, 2:37 pm)

i like this idea as well, i think footers should repeat the theme of site or an idea or perhaps the logo in some kind of way.
- Comment
17.

Tropos (October 6th, 2007, 7:18 am)

I think footers should be only when needed. Every project has different characteristics so a lot of them would never require a footer.
Take care out there….
- Comment
18.

Wade (October 23rd, 2007, 8:18 pm)

Link [www.snook.ca]

A brilliant footer, so effective and minimalist!
- Comment
19.

PT (November 16th, 2007, 10:43 pm)

Potentially not safe for work with the Suicide Girls link there…even if the site looks really nice (in more ways than one).
- Comment
20.

bakazero (January 31st, 2008, 7:15 am)

Wow, this is really nice artwork…
It’s really inspire me a lot…
- Comment
21.

bakazero (January 31st, 2008, 7:26 am)

The design really inspire me a lot…
Very creative!
- Comment
22.

rageapples (February 11th, 2008, 11:26 pm)

I’m happy to see you left out all of the examples of excessive footer use. You know, the ones that are a whole other web site themselves.
- Comment
23.

Aiman (February 19th, 2008, 10:37 pm)

hi …thz 4 da lovely footer..i am going to use it for my project…
- Comment
24.

Vovan (February 21st, 2008, 6:30 pm)

Russian translate of this article
Link [x28.ru]
- Comment
25.

Matei (February 23rd, 2008, 7:36 am)

Just great list.. I like what you are doing here!1!
- Comment
26.

hello (March 11th, 2008, 7:28 am)

woohoo!
- Comment
27.

Web Design Lincolnshire (March 26th, 2008, 4:15 am)

Nice looking footers adds a bit of class to a website and can act as an attractive navigation system at the bottom of the page, I like to include a back to top link in my sites as well.
- Comment
28.

thangaraj (April 10th, 2008, 3:41 am)

very interesting artcle…thanks smashing magazine.
- Comment
29.

abhinay (April 10th, 2008, 9:31 pm)

Nice Collection.,
Thanks to Smashing Magazine.

Cheers,
- Comment
30.

CHAK90X (April 14th, 2008, 9:53 am)

Footers are the most importent thing in the template , it sall be cool , s that the visitor will be happy to get n the end of the site :D
- Comment
31.

Mateusz.Kmiecik (April 30th, 2008, 11:58 pm)

Nice collection. There we can add Link [css-tricks.com]
- Comment

68155 subscribers

Sponsors
Advertise with us!

Browse all jobs » Post your jobs now!

Smashing Links

All Posts

Marketing consulting by ACS

Webtips

Sideblog

Ross Johnson discusses 8 forgotten fonts you may use in CSS. Among them are Palatino Linotype, Century Gothic, Copperplate and Gill Sans — apparently, these fonts are installed on a variety of operating systems.

How creative can a table of contents be? Designobserver presents Thirty Tables of Contents. The collection includes excerpts from the books by Philip Larkin, Philip Roth, Paul Rand and Jan Tschichold.

A set of 18 splendid and colorful looking 3D RSS-Icons. They are done with 3d Studio Max. JPG.

In Font Clock 12 different fonts are printed within the mechanism of a clock, providing a random, mixed display of graphic language within a single time piece. Designed by Sebastian Wrong.

One pixel notched corners as used by Google Analytics. Instead of each option being boxed in a clickable rectangle, there is a 1px notch in each corner. It's not necessarily a curved corner, but it is a little softer than a normal box. Nice little trick.

Hartija is a CSS print framework which is an attempt to unite best CSS printing practices into one single CSS-file.

Rather than standard website templates, a free admin template is nearly impossible to find. This is an admin template which you can use for web applications like online-shops or CMS.

Fully Personal Interface research is a survey where people are questioned about their interface preferences. Results: labels and icons should be placed on the left, horizontal menus are more popular than vertical ones.