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

CSS-Based Footers: Modern Solutions

By Smashing Editorial, January 9th, 2007 in Design Showcase | 59 Comments | Forum

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.

Artypapers.com

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Delicious button Stumbleupon Spread the word on Twitter!

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

    Katya (September 5th, 2008, 11:27 pm)

    Good collection! Will place your link on my site.
    Link [www.morebmw.com]

  23. 23.

    Neil T (December 8th, 2008, 7:41 am)

    Hi, I’ve just completed a new website with a really cool footer. Link [www.everything4kids.com] What do you think ?

  24. 24.

    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

  25. 25.

    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.

  26. 26.

    Burçlar (April 2nd, 2009, 11:49 am)

    great job thanks for the article

  27. 27.

    B Qazi (June 12th, 2009, 8:16 pm)

Leave a Reply

Allowed Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Advertisement
 

All Posts

Follow us on Twitter!
Subscribe to our RSS-feed!

Advertisement

Fresh Bookmarks

25 Beautiful Logos with Sequential Concept
Sequential logos maybe is a new trend among logo designers.

Designing a blog with HTML5
Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages.

20+ CSS Data Visualization Techniques
Get inspired.

CSS3 – a big storm is coming
With CSS3 media queries and multi-column layouts it will be a whole new ballgame.

Woodgrain: A Free Social Media Icon Set
With 18 social networks represented alongside astandard RSS icon in PNG format,

Webdesign: Five Minute Upgrade
Making Your Design Pop.

45 Stylish Typographical Desktop Wallpapers
These beautifully designed wallpapers are not solely about typography.

The Light CMS Trend
A new trend in CMSs I’m calling “light” CMSs.

10 Impressive JavaScript Animation Frameworks
Create stunning and eye-grabbing animation and transition effects.

Linux System Monitoring Tools Every SysAdmin Should Know
Need to monitor Linux server performance?

  • 9Rules Logo
  • Quicksprout Logo