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

CSS-Based Footers: Modern Solutions

Advertisement

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. Links checked: June/19 2008.

Footer0000 in CSS-Based Footers: Modern Solutions

Footer0005 in CSS-Based Footers: Modern Solutions

Footer0031 in CSS-Based Footers: Modern Solutions

Footer0032 in CSS-Based Footers: Modern Solutions

Footer0004 in CSS-Based Footers: Modern Solutions

Footer0008 in CSS-Based Footers: Modern Solutions

Footer0010 in CSS-Based Footers: Modern Solutions

Footer0021 in CSS-Based Footers: Modern Solutions

Footer0022 in CSS-Based Footers: Modern Solutions

Footer0023 in CSS-Based Footers: Modern Solutions

Footer0026 in CSS-Based Footers: Modern Solutions

Footer0027 in CSS-Based Footers: Modern Solutions

Footer0029 in CSS-Based Footers: Modern Solutions

Footer0030 in CSS-Based Footers: Modern Solutions

Footer0011 in CSS-Based Footers: Modern Solutions

Footer0017 in CSS-Based Footers: Modern Solutions

Footer0002 in CSS-Based Footers: Modern Solutions

Footer0020 in CSS-Based Footers: Modern Solutions

Footer0024 in CSS-Based Footers: Modern Solutions

Footer0003 in CSS-Based Footers: Modern Solutions

Footer0012 in CSS-Based Footers: Modern Solutions

Footer0013 in CSS-Based Footers: Modern Solutions

Footer0014 in CSS-Based Footers: Modern Solutions

Footer0015 in CSS-Based Footers: Modern Solutions

Footer0016 in CSS-Based Footers: Modern Solutions

Footer0006 in CSS-Based Footers: Modern Solutions

Footer0019 in CSS-Based Footers: Modern Solutions

Footer0025 in CSS-Based Footers: Modern Solutions

Footer0028 in CSS-Based Footers: Modern Solutions

Footer0033 in CSS-Based Footers: Modern Solutions

Footer0034 in CSS-Based Footers: Modern Solutions

Vitaly Friedman, editor-in-chief of Smashing Magazine (www.smashingmagazine.com), an online magazine dedicated to designers and developers.

Post Rating
1 Star2 Stars3 Stars4 Stars5 Stars (No votes yet)
Loading ... Loading ...

Tags: ,

Advertising
  1. 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.

  2. 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”!

  3. 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.

  4. 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…

  5. 5
    jalansutera
    January 9th, 2007 6:51 pm

    should our readers pay attention more to our footer? how many readers pay attention to footer?

  6. 6
    xaxaxa
    January 10th, 2007 12:01 am

    Nice footers. Good review.

  7. 7
    Slaff
    January 10th, 2007 12:07 am

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

  8. 8
    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.

  9. 9
    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!

  10. 10
    jamjammo
    March 20th, 2007 4:35 pm

    Would it be safe to state that i have a foot fetish?
    lol

  11. 11
    Stefan
    July 24th, 2007 4:20 am

    Thanks for this article a lot :) gave me a whole lot of inspiration!

  12. 12
    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.

  13. 13
    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….

  14. 14
    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).

  15. 15
    bakazero
    January 31st, 2008 7:26 am

    The design really inspire me a lot…
    Very creative!

  16. 16
    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.

  17. 17
    Aiman
    February 19th, 2008 10:37 pm

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

  18. 18
    Matei
    February 23rd, 2008 7:36 am

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

  19. 19
    thangaraj
    April 10th, 2008 3:41 am

    very interesting artcle…thanks smashing magazine.

  20. 20
    abhinay
    April 10th, 2008 9:31 pm

    Nice Collection.,
    Thanks to Smashing Magazine.

    Cheers,

  21. 21
    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

  22. 22
    Samsul
    February 26th, 2009 2:37 am

    very useful tutorial, I’m in process of making unique theme for my own blog. it’s going to be my best reference! :-D

  23. 23
    ardilo
    April 1st, 2009 12:55 am

    i dont like these kind of footers because of the spesific reasons. İn fact, designers never believe the power of footer. so do i, but in my next project i wanna try some of them. maybe it changes something.

  24. 24
    Burçlar
    April 2nd, 2009 11:49 am

    great job thanks for the article

  25. 25
    Christel
    July 20th, 2009 11:39 am

    Thank you Smashing Magazine!
    Your articles never cease to amaze me. Keep up the great research and networkiing

  26. 26
    karthikeyan Bhaskaran
    October 15th, 2009 2:33 am

    Nice Articles……………………………………………………………………..

    Regards
    kartikeyan
    web designer

  1. 00

    There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.

Leave a Comment

Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!



Advertisement Advertise with us!
Join in Smashing Forum
Post your job