Smashing Magazine - we smash you with the information that will make your life easier. really.
CSS-Based Footers: Modern Solutions
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.
Vitaly Friedman, editor-in-chief of Smashing Magazine (www.smashingmagazine.com), an online magazine dedicated to designers and developers.
(No votes yet)
Loading ...- 26 Comments
- 1
- 2
January 9th, 2007 3:55 pmA “Footer” is able to be more than just a line ;o) Very nice “Footer-Collection”!
- 3January 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.
- 4January 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… - 5January 9th, 2007 6:51 pm
should our readers pay attention more to our footer? how many readers pay attention to footer?
- 6January 10th, 2007 12:01 am
Nice footers. Good review.
- 7January 10th, 2007 12:07 am
Very cute collection =). Thanks for sharing & doing that great work for us ;)
- 8January 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.
- 9January 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!
- 10March 20th, 2007 4:35 pm
Would it be safe to state that i have a foot fetish?
lol - 11July 24th, 2007 4:20 am
Thanks for this article a lot :) gave me a whole lot of inspiration!
- 12August 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.
- 13October 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…. - 14November 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).
- 15January 31st, 2008 7:26 am
The design really inspire me a lot…
Very creative! - 16February 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.
- 17February 19th, 2008 10:37 pm
hi …thz 4 da lovely footer..i am going to use it for my project…
- 18February 23rd, 2008 7:36 am
Just great list.. I like what you are doing here!1!
- 19April 10th, 2008 3:41 am
very interesting artcle…thanks smashing magazine.
- 20April 10th, 2008 9:31 pm
Nice Collection.,
Thanks to Smashing Magazine.Cheers,
- 21April 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
- 22February 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
- 23April 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.
- 24April 2nd, 2009 11:49 am
great job thanks for the article
- 25July 20th, 2009 11:39 am
Thank you Smashing Magazine!
Your articles never cease to amaze me. Keep up the great research and networkiing - 26October 15th, 2009 2:33 am
Nice Articles……………………………………………………………………..
Regards
kartikeyan
web designer
- 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!
Interact
Popular
- 100 Wordpress Themes
- Photoshop Tutorials
- Fantastic Wallpapers
- 40+ Excellent Freefonts
- Dual-Screen Wallpapers
- Wordpress Themes for 2009
- Illustrator Tutorials
- Incredible Free Icon Sets
- High-Quality Free Fonts
- 30 Scripts For Galleries
- Photoshop Text Effects
- Useful Icon Sets
- Web Design Trends
- iPhone Wallpapers
- Before Launching a Website
- CSS Layouts And Templates
- Photoshop Actions
- Stunning Pictures and Photos
- Fantastic HDR Pictures
- Logo Design Tutorials
- Free Design Templates
- 10 Mistakes In Logo Design
- Photoshop Custom Shapes
- 40 Creative Design Layouts
- 8 Layout Solutions
- 53 CSS Techniques
- Photography Techniques
- Black & White Photography
- Styling Design Elements
- CSS-Based Forms
- 50 jQuery Techniques
- 50 Portfolio Websites
- 50 CSS Techniques
- Creative Logo Designs
- Desktop Wallpapers
- 25 Open Source Mac Apps
- 50 Free Icon Sets
- How to Drastically Improve Your Designs - http://bit.ly/a9L1sb
- A Quick Look at Mobile Web Designs - http://bit.ly/9TCWCG
- How to Test your JavaScript Code with QUnit - http://bit.ly/da853c
- jQuery 1.4 API Cheat Sheet - http://bit.ly/5zYYnE
- Beautiful, Elegant and Free 48px Icon Set - http://bit.ly/cSWcBR
- Gridmaker For Photoshop CS4 - http://bit.ly/98F9kv (via @designernews)
- All freely available fonts on MyFonts in an overview - http://bit.ly/6osbDd
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.