CSS-Based Footers: Modern Solutions

Advertisement

Every design element deserves particular attention in Web 2.0. Navigation menus1, forms2, comment forms3, comment designs4, tables5, typography6, fonts7, even more fonts8 and even download buttons9 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.com10

Screenshot11

Screenshot12

Screenshot13

Screenshot14

Screenshot15

Screenshot16

Screenshot17

Screenshot18

Screenshot19

Screenshot20

Screenshot

Screenshot21

Screenshot22

Screenshot23

Screenshot24

Screenshot25

Screenshot26

Screenshot27

Screenshot28

Screenshot29

Screenshot30

Screenshot31

Screenshot32

Screenshot33

Screenshot34

Screenshot35

Screenshot36

Screenshot37

Screenshot38

Screenshot39

Footnotes

  1. 1 http://alvit.de/css-showcase/css-galleries-tabs-navigation-showcase.php
  2. 2 http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
  3. 3 http://www.smileycat.com/miaow/archives/comment-form-showcase.html
  4. 4 http://www.smileycat.com/miaow/archives/comment-showcase.html
  5. 5 http://www.smashingmagazine.com/2006/12/29/css-based-tables-modern-solutions/
  6. 6 http://www.smileycat.com/miaow/archives/typography-for-headlines.html
  7. 7 http://www.smashingmagazine.com/2006/10/11/17-more-free-quality-fonts/
  8. 8 http://www.alvit.de/blog/article/20-best-license-free-official-fonts
  9. 9 http://www.smashingmagazine.com/2006/11/03/design-patterns-download-buttons/
  10. 10 http://www.artypapers.com/
  11. 11 http://www.daleharris.com
  12. 12 http://www.designshack.co.uk
  13. 13 http://arcsin.se
  14. 14 http://www.davincigourmet.com
  15. 15 http://www.potionfactory.com/tangerine
  16. 16 http://www.gruppomodulo.it/
  17. 17 http://www.ndesign-studio.com
  18. 18 http://suicidegirls.com/
  19. 19 http://www.karaburke.net/
  20. 20 http://www.jp33.com/
  21. 21 http://www.komodomedia.com/
  22. 22 http://www.carawilliams.com.au/
  23. 23 http://www.xhtmlit.com/
  24. 24 http://www.zufanek.cz
  25. 25 http://hicksdesign.co.uk/journal/
  26. 26 http://www.weblinc.com/
  27. 27 http://www.revolucao.etc.br/
  28. 28 http://pls.nd.edu/
  29. 29 http://www.pixellogo.com/
  30. 30 http://www.netdiver.net/
  31. 31 http://www.enomaly.net/
  32. 32 http://www.vlastimilsvoboda.cz/
  33. 33 http://www.hopkingdesign.com/
  34. 34 http://www.jordandchan.com/chch/
  35. 35 http://www.playstop.net/
  36. 36 http://www.yourperfectdayevents.com/
  37. 37 http://splashyfish.com/
  38. 38 http://dennisbloete.de/
  39. 39 http://cssgalerie.net/

↑ Back to topShare on Twitter

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops and loves solving complex problems in large companies. Get in touch.

Advertising
  1. 1

    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.

    0
  2. 2

    Webstandard-Team

    January 9, 2007 3:55 pm

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

    0
  3. 3

    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.

    -1
  4. 4

    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…

    1
  5. 5

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

    0
  6. 6

    Nice footers. Good review.

    0
  7. 7

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

    0
  8. 8

    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.

    0
  9. 9

    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!

    0
  10. 10

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

    0
  11. 11

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

    0
  12. 12

    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.

    1
  13. 13

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

    0
  14. 14

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

    0
  15. 15

    The design really inspire me a lot…
    Very creative!

    0
  16. 16

    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.

    0
  17. 17

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

    0
  18. 18

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

    0
  19. 19

    very interesting artcle…thanks smashing magazine.

    0
  20. 20

    Nice Collection.,
    Thanks to Smashing Magazine.

    Cheers,

    0
  21. 21

    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

    0
  22. 22

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

    0
  23. 23

    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.

    0
  24. 24

    great job thanks for the article

    0
  25. 25

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

    0
  26. 26

    karthikeyan Bhaskaran

    October 15, 2009 2:33 am

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

    Regards
    kartikeyan
    web designer

    1
  27. 27

    this is very good! I have used the ideas on siteforcare.com

    1
  28. 28

    have been visiting ur blog around 3 days. really like what you posted. btw i am doing study regarding this topic. do you know any other sites or forums where I can learn more? thanks a lot.

    -1
  29. 29

    Test accomplishing the plans beneath the opposite header-the a person that reads ‘you would probably have the option to complete.’

    0
  30. 30

    I really love those kind of footers! It gives your website this unique look!

    Now I’m wondering how to make such a footer?

    Which program should I use to create such a footer?

    Thanks in advance!

    Frits Vrielink

    0
  31. 31

    Hi I wish to to talk about the comment here regarding you to definitely be able to inform you just how much i actually Loved this particular read. I must run off to aTurkey Day time Dinner however wanted to depart ya a simple remark. We saved you So will be returning subsequent work to read more of yer high quality articles. Continue the quality work.

    0
  32. 32

    Smashing Media Customer Support

    August 9, 2011 12:36 am

    Dear Lee, please describe your problem in detail and send it to us via our contact form http://www.smashingmagazine.com/contact/ and use the subject technical problem.

    0
  33. 33

    Located you blog site by using askjeeve I have to admit I m astounded with your articles!

    0
  34. 34

    Good – I should definitely say I’m impressed with your blog.
    I had no trouble navigating through all the tabs as well as related info.
    The site ended up being truly simple to access. Excellent job..

    0

↑ Back to top