Smashing Magazine - we smash you with the information that will make your life easier. really.
Powerful CSS-Techniques For Effective Coding
Sometimes being a web-developer is just damn hard. Particularly coding is often responsible for slowing down our workflow, reducing the quality of our work and sleepless nights with pizza and coffee laying around the laptop. Reason: with a number of incompatibility issues and quite creative rendering engines it sometimes takes too much time to find a workaround for some problem without addressing browsers with quirky hacks. And that’s where ready-to-use solutions developed by other designers come in handy.
One year ago we’ve published the post with 53 CSS-Techniques You Couldn’t Live Without where we provided references to the most useful CSS-techniques which are often used in almost every project. Over the last year we’ve been observing what’s happening with the CSS-based web-development, and we collected most useful CSS-techniques we’ve stumbled upon — for us and for our readers.
In this post we present 50 new CSS-techniques, ideas and ready-to-use solutions for effective coding. You definitely know some of them, but definitely not all of them. Some technique is missing? Let us know in the comments to this post.
Thanks to all developers who contributed to the CSS-based design over the last year. The community appreciates it.
CSS-Techniques
1. Triadic Background Setting with CSS
The Silverback web site uses three background images to create the illusion of 3D with simple CSS. No documentation is provided, however the source code is quite intuitive. [via Wilson Miner]
2. Creative Use of PNG Transparency in Web Design
With proper PNG support in Internet Explorer 7, and some handy JavaScript and CSS tricks to account for older browsers, we can use PNG images to greatly enhance our design vocabulary.
3. CSS Server-Side Pre-Processor
5. CSS SiteMap
6. Styling File Inputs with CSS and the DOM
File inputs (<input type=”file” />) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation.
7. A Savvy Approach to Copyright Messaging
Derek Powazek suggests adding a copyright message to a photo and use CSS to crop its view. This is supposed to accomplish the goal of adding robust copyright information without defacing your own work.
9. Advanced CSS Menu Trick
What we want to do here, is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well.
10. CSS hover effect
11. Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table
12. A Stripe of List Style Inspiration
A different type of list and navbar styling. As stripes.
13. Rediscovering the Button Element
14. Dynamic CSS With Variables
Geoffrey Grosenbach describes how you can integrate CSS variables in CSS coding — with Ruby on Rails.
15. Hyperlink Cues with Favicons
I wanted to extend the concept of hyperlink cues a little. For links that point to external sites, what if, instead of showing a generic ‘external link’ icon, we showed that site’s favicon?
16. A CSS styled table version 2
17. CSS Step Menu
A method of designing the so-called step-menus, which have some steps users have to go through in order to achieve some aim. This menu offers a varying amount of steps, dependent upon the type of user accessing the application.
18. Creating bulletproof graphic link buttons with CSS | 456 Berea Street
19. Iconize Textlinks with CSS
Links are fun, but sometimes we don’t know where they take us. With this little CSS technique a user can identify a link by its icon. The updated release of the technique.
20. Better Ordered Lists (Using Simple PHP and CSS)
Ordered lists are boring! Sure you can apply background images and do quite a bit of sprucing up to a regular ordered list, but you just don’t get enough control over the number itself.
21. Circular Menu with CSS
This article shows how a beautiful circular navigation menu is created. In Spanish with Source code and an example.
22. CSS Dock Menu
23. Digg-like navigation bar using CSS
This tutorial explains how to design a digg-like navigation bar using a liquid design with rounded corners for links.
24. 13 Awesome Javascript CSS Menus
13 “fresh” JavaScript+CSS-based navigation menus in a brief overview. Among other things Slashdot Menu and Sexy Sliding Menu displayed below.
25. CSS Pricing Matrix
A CSS-based matrix in which clicking on a highlights the associated cell in the top row and left column giving an indication of relationships among the provided information. Similar solution: Tablecloth.
26. CSS List Expander
So, we have an unordered list that can go on in depth as much as we want. The script analyzes the list tree and applies toggle functions for expanding/collapsing child objects.
27. How to create VISTA style toolbar with CSS
Reproducing Vista toolbar, with buttons and hover effect in cross-browser compatible CSS and (X)HTML.
28. Fade Out Bottom
This is a demonstration of the effect where the bottom of the page seems to fade out. The technique makes use of an fixed position div (bottom: 0%) with a transparent PNG image and a high z-index value.
29. Scrollovers – A New Way of Linking
Everyone is familiar with hover-effects. This CSS+JavaScript-based techniques creates the Scrolleffect – not really necessary, but it’s nice to know, how it can be done.
30. How to Style an A to Z Index with CSS
31. CSS List Boxes
Using a simple unordered list this experiment aligns the boxes across the page with the end result being to showcase items like services, products, or specials. One of cool thing about this — if you turn off styles — is the extractable semantics with the headings and paragraphs used.
32. How-to create a “Table of Contents” Navigation
In as little as 8 lines of HTML, and 5 lines of CSS, the Table Of Contents Navigation block can be integrated in your site ready for even more styling.
34. Partial Opacity
35. Simple Round CSS Links (Wii Buttons)
36. How to make sexy buttons with CSS
37. CSS Pull Quotes
38. Drop Shadow CSS
39. CSS Speech Bubbles
Easy to customize speech bubbles coded in CSS and valid XHTML 1.0 strict.Tested in all major browsers.
40. CSS Double Lists
42. Better Email Links: Featuring CSS Attribute Selectors
Learn how to generate code for displaying the e-mail automatically once mailto is used. CSS Attribute Selectors in action which is not supported by Internet Explorer 6 and 7.
43. CSS: Menu Descriptions
This is a CSS technique that could be useful if you want to give users accessible added content such as tool-tips, notifications, or alerts, without adding unnecessary clutter to your page. And since it doesn’t rely of JavaScript, it should be useful to everyone, even disabled users.
Further Techniques
44. CSS Transparency Settings for All Browsers
45. Time Sensitive CSS Switcher
CSS Switching script that changes style sheet based on time of day.
46. Custom Reading Containers
This amazing little script allows the user to resize any container.
48. PNG Overlay
Create a transparent PNG overlay which can be used as a mask / frame around regular JPEG or GIF so users can upload photos without having to worry about using any graphics program to apply filters, plus it saves time.
Vitaly Friedman, editor-in-chief of Smashing Magazine (www.smashingmagazine.com), an online magazine dedicated to designers and developers.
- 114 Comments
- 1
- 2February 21st, 2008 10:36 am
Thanks for linking our article. You have some great collection of css techniques over here :)
We have created 2 round-ups of CSS techniques that have some other great CSS Techniques that we can find handy.
http://www.noupe.com/design/101-css-techniques-of-all-time-part-1.html
http://www.noupe.com/css/101-css-techniques-of-all-time-part2.html - 3February 21st, 2008 10:39 am
awesome collection, as always.
tnx!
- 4February 21st, 2008 10:44 am
Great list. Another reason for me to procrastinate at work!!
- 5February 21st, 2008 10:59 am
I was just wondering why you keep reposting the same items in multiple articles.
Sure, this one has many awesome new things, but many of them I’ve already seen before on your site.
What’s going on? - 6February 21st, 2008 11:28 am
nice list
- 7February 21st, 2008 11:31 am
You guys are too awesome. I mean it! If it weren’t for you, I would still be a total newbie.
Thanks! Keep it up, please.
Thomas, 14 years - 8February 21st, 2008 11:31 am
Thanks for the list – very useful – will keep me busy for a while!!!
- 9February 21st, 2008 11:34 am
Awesome! I know what I’m doing tonight.
Thanks
- 10February 21st, 2008 11:48 am
I find all of your articles useful, but this particular article is the best I’ve seen yet. Thank you.
- 11February 21st, 2008 11:55 am
Nice!
An excelent colection! Keep up the good work! =) - 12February 21st, 2008 12:21 pm
Great set of resources. Keep ‘em coming!
- 13February 21st, 2008 12:43 pm
Holy smokin’ list o’ links! Guh! I’m rethinking various UI stuff now. Awesome collection!
- 14February 21st, 2008 1:18 pm
Am I glad that I just inserted Smashingmagazine rss into my rss application! Very handy overview.
- 15February 21st, 2008 1:31 pm
Nice list, I’m resolved to do my next big project with pngs! Smashmag kicks ass.
- 17February 21st, 2008 3:07 pm
Keep up the good work!!
- 18February 21st, 2008 3:15 pm
Very useful post for techniques and inspiration.
- 19February 21st, 2008 3:20 pm
I’ve been trying to figure out for awhile how Apple did their rounded form field on their homepage and got it to show up nicely in Safari 1.x
I got my form fields hidden by hiding the border and making it white, but Safari 1.x still shows the ugly form field… anyone seen anything on this?
- 20February 21st, 2008 3:47 pm
Reading this shows just how much there is to learn. Great list. New things to try.
- 21February 21st, 2008 3:55 pm
I love you :)
- 22February 21st, 2008 4:09 pm
Amazing List. Thanks.
- 23February 21st, 2008 5:06 pm
You’ve duplicated a paragraph in the introduction.
You’ve duplicated a paragraph in the introduction.Handy resource, I will try to refer to this article regularly.
- 24February 21st, 2008 5:52 pm
wow, I have about 40 new side-projects :)
- 25February 21st, 2008 8:15 pm
“Time Sensitive CSS Switcher”
this is the stuff i’m looking for..now if they can change the whole content
prior to within times..that’ll be even greater :Dthanks for compiling the list for us css geek….
- 26February 21st, 2008 9:01 pm
Oh my god, so may useful techniques. Thanks for collecting!!!
- 27February 21st, 2008 10:31 pm
If u keep posting articles like this i can never call myself a CSS expert ;-)
Thanks for great list ;-)
- 28February 21st, 2008 11:08 pm
Best article ever.
- 29February 21st, 2008 11:49 pm
My only thought after this post was that i love you :) Thanks for that!
- 30February 21st, 2008 11:54 pm
Awesome list!
This article goes far beyond any other I’ve seen
Keep it up!
- 31February 21st, 2008 11:58 pm
Excellent list as usual :) vote for dock icon from ndesign-studio, i use it on my website
- 32February 22nd, 2008 12:18 am
An awesome collection of useful resources. Thank you!
- 33February 22nd, 2008 1:28 am
Awesome!!
- 34February 22nd, 2008 2:19 am
great! just added to my fav’s!!
- 35February 22nd, 2008 2:29 am
Yet another incredibly inspiring list. Why would we expect anything less? Thanx
- 36February 22nd, 2008 3:08 am
Great list.
The title is in my opinion non appropriate. Most effects are combination of CSS AND Javascript. - 37February 22nd, 2008 3:22 am
CSS is the best!
- 38February 22nd, 2008 3:55 am
what to say? SM is the best! great post. Where I’m I going to find time to explore most of the examples shown here? :)
- 39February 22nd, 2008 4:14 am
wow
- 40February 22nd, 2008 4:54 am
Very useful tricks. Thanks
- 41February 22nd, 2008 4:55 am
the best post ever :)
- 42February 22nd, 2008 5:01 am
Superb!
- 43February 22nd, 2008 5:14 am
Damn Good
- 44February 22nd, 2008 5:25 am
This is quite a selection of techniques! And I must say, some are even new to me :)
- 45February 22nd, 2008 6:01 am
Wow. So much to learn still. Great inspiration!!
- 46February 22nd, 2008 6:02 am
Thanks for pointing out “Table of Contents” CSS example.
Cheers
- 47February 22nd, 2008 6:17 am
Hey thats neat..especially the Vista style CSS
- 48February 22nd, 2008 6:21 am
Brilliant. Great list.
- 49February 22nd, 2008 6:24 am
Awesome, very nicely done ’smashing’
- 50February 22nd, 2008 6:30 am
thanks.
- 51February 22nd, 2008 6:33 am
13. Rediscovering the Button Element
Love this tip; not many people are aware of the power that css has over buttons. Great article, thanks. - 52February 22nd, 2008 6:50 am
Nice collection, and thank you for including my article :)
- 53February 22nd, 2008 7:29 am
This site is always a pleasure to look at… so much great stuff it is ridiculous. If my boss only knew how much time was spent on your site…
- 54February 22nd, 2008 7:43 am
#1. Should’nt one image be enough? What is the reason for using three images?
- 55February 22nd, 2008 8:10 am
Great list! One thing I wish to goodness I could find again is a CSS experiment site that used two different background images on the header so the right side was different from the left.
The page was flexible and the right/left images were 100% of the horizontal viewport.
Anyone know the technique I’m talking about or seen a similar site? The one I saw, just a few months ago, was for a mock beachwear/surf type company. I kick myself everyday for not bookmarking it!
- 56February 22nd, 2008 10:04 am
@ donnie
I too wondered that at first … why not just use one image? The reason is (I think) because you can tile each image separately and get a more random look. For instance the front image on a 1280×1024 screen tiles twice. The mid one tiles 1 and a little times. The back image tiles about three times. It just allows for more randomness without having to make a really large and long top image. All in all a pretty good idea.
- 57February 22nd, 2008 12:10 pm
@Fred Clown
Yes I see it now. Different browser width generates different backgrounds. Did’nt see it earlier. =)
- 58February 22nd, 2008 1:20 pm
Oh Thank You, oh thank you. I needed this.
CSS frustrates me to no end sometimes. I often wish I could trap and skin that damn fire fox. An inhumane leg hold trap at that. Other times I wish a hired gun would take out the entire IE development team, starting with the guy at the top. If i had my choice it would be the hit on MSN staffers before trapping that pesky fox. Definitely. Its far easier to tame the fox than it is to control that ignorant 800 pound gorilla.
- 59February 22nd, 2008 1:58 pm
useful content, thanks.
- 60February 22nd, 2008 2:02 pm
You guys always amaze me! This is an awesome article…thank you for taking the time to put this together.
- 61February 22nd, 2008 10:30 pm
I learned some neat tricks. Thanks!
- 62February 23rd, 2008 12:53 am
nice article, useful links.. thanks ..
- 63February 23rd, 2008 2:57 am
Thanks for including Clearleft’s Silverback app faux-3D holding page – glad you like it! Though I’m slightly confused why you’d expect documentation to be included. How many websites include instructions on how they were made? Having said that, many people have asked for it and we will be publishing a short tutorial soon.
- 64February 23rd, 2008 6:39 pm
Great list for web developer .Thanks
- 65February 24th, 2008 1:12 am
This is actually something we have been looking for to further our website. We’ll have to implement some of this stuff, thanks :)
- 66February 24th, 2008 3:35 am
superb resource,love u gyies for this
- 67February 24th, 2008 9:32 am
Finally on 25th Feb 2008. I got a reason to say a Happy New Years!!! LOL Thank you Smashing Magazine!
- 68February 24th, 2008 9:49 am
Live it. Wow.
- 69February 25th, 2008 7:08 am
You guys rock!
- 70February 25th, 2008 10:54 am
To be honest, I expected CSS techniques in this article. Examples presented above show mostly various design techniques using CSS and Javascript. Therefore the article should have different heading… CSS techniques are for example CSS reset, hierarchical styling, using pseudoselectors, hacks and so on…
- 71February 25th, 2008 7:20 pm
Great tips! Now I have to make my forms looking better… :)
- 72February 25th, 2008 11:53 pm
Wow what a nice list, thanks
- 73February 27th, 2008 8:24 am
Here’s a tutorial on the faux-3D effect used on the Silverback holding page.
http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax - 74February 28th, 2008 2:41 am
Great article! About PNG transparency AlphaImageLoader on “” elements we´ll find the solution on 49abcnews.com code: Using conditional comments + CSS like this:
XHTML
“”CSS
“#element {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”http://media.49abcnews.com/img/trans-white-20.png”, sizingMethod=”scale”);
}” - 75February 28th, 2008 2:59 am
Great article! About PNG transparency AlphaImageLoader on div, span, tables… elements, without a .js file, we´ll find the solution on 49abcnews.com code: Using conditional comments and CSS like this:
CSS
#element {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”http://media.49abcnews.com/img/trans-white-20.png”, sizingMethod=”scale”);
}An example applying a shadow-effect over gradient background image:
- 76February 28th, 2008 3:01 am
Great article! About PNG transparency AlphaImageLoader on div, span, tables… elements, without a .js file, we´ll find the solution on 49abcnews.com code: Using conditional comments and CSS like this:
CSS
#element {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”http://media.49abcnews.com/img/trans-white-20.png”, sizingMethod=”scale”);
} - 77February 29th, 2008 2:49 am
I came to smashing magazine originally for CSS and lately there have been a dearth of good CSS related posts, but this one filled that void. Awesome smashing post, keep em coming!
- 78February 29th, 2008 10:30 am
Thank you for your great job. There are much great ideas to discover….
From Germany
Ralph
- 79February 29th, 2008 10:16 pm
haha I LOVE the favicon hyperlink cues. I’ve got to implement that. Excellent list as usual!
- 80March 4th, 2008 7:10 am
Nifty tool for css coders: markup generator. Saving you the time needed to write xhtml.
- 81March 6th, 2008 4:00 am
RE: #50. resizing images with text – one word – Opera
bring on the browsers that support vector graphics.
- 82March 7th, 2008 7:16 am
wow. that’s all i can say. thanks!
- 83March 8th, 2008 8:23 am
Awesome list. Dugg!
- 84March 12th, 2008 3:22 am
Again, I hope I may point to a method that helps judging these techniques [1]. Some are in fact quite good, others might be “worth reconsideration”.
- 85March 15th, 2008 11:20 am
I love Tip 19. Iconize Textlinks with CSS – It’s so simple and yet effective
Since this is my first comment on this page I want to congratulate you guys for this fantastic resource of inspiration.
Many thanks
Christian - 86March 18th, 2008 4:31 am
I Like all the Css . These are all possible in GWT. I want to Apply These All css in GWT. I dont Know GHow to Apply .Please replay me any ones Nows.
- 87March 18th, 2008 4:35 am
I want to apply these CSS in GWT is it Possible?.. Any one Know Pls Reply.
- 88March 18th, 2008 10:59 am
We love that CSS sitemap. We use it all the time now to give our clients an easy-to-read prototype of their sitemap before actually building the site.
We just built http://sitemappers.com/ to help us make these sitemaps (because we’re too lazy to keep typing out HTML).
Go ahead and play with it - 89March 24th, 2008 6:44 am
Great collection!
- 90April 3rd, 2008 10:03 am
Simply superb !!! Such an inspiring collection of wonderful scripts and ides.. Kudos to all who worked behind this :-)
- 91April 28th, 2008 10:24 am
Nice collection, indeed! Thank you.
- 92June 8th, 2008 12:23 am
great tips really
thx so much - 93June 9th, 2008 9:23 pm
hi:
I want to know that how can i reduce using !important in margins for ie6.and
How can i control the horizontal scrollbar of textarea of a form.
thnkx
- 94June 17th, 2008 7:46 pm
So great! thanks!
- 95
- 96July 25th, 2008 1:15 am
very informative site for me Thanks……!
- 97
- 98October 22nd, 2008 5:17 am
Wow.. that’s a ton of good stuff. I like the one with the fade out in the bottom of the page. subtle but nice!
- 99December 5th, 2008 11:02 am
Great collection!
- 100December 14th, 2008 9:58 pm
nice
- 101January 1st, 2009 8:57 pm
wow..amazing..it;s great…thx
- 102January 12th, 2009 9:13 pm
this is an very useful tips. thanks
- 103January 14th, 2009 10:26 am
I got lost in this source!
- 104January 20th, 2009 1:02 pm
Excellent Tutorials my friends. Thank you for sharing. These are great time-saver effects! Keep up the good work!
- 105January 22nd, 2009 12:51 am
Nice & greatfull resource… million of thanks
- 106February 5th, 2009 5:31 pm
This is very useful to me. Thanks a lot!
- 107February 14th, 2009 6:52 pm
I like css sites but more an more am getting bored with them.
- 108February 19th, 2009 12:41 am
Very helpful content fro any programmer , Web Designer and SEO.
- 109March 8th, 2009 5:20 pm
great collections!
thanks
- 110March 30th, 2009 2:30 am
great job . i hate from internet explorer 6 , i cant use PNG Transparency in my website.
- 111April 2nd, 2009 7:27 pm
very good, thnks so much.
- 112May 2nd, 2009 6:38 am
very good, thnks so much.
- 113
- 114November 14th, 2009 4:36 pm
This is an awesome resource, but I feel that a bit too much of the stuff here is dependant on JavaScript to function, which is not really truth in advertisement for an article titled “Powerful CSS Techniques”.
- 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
- Apple ad bombing Windows 7 on Google - http://bit.ly/28ctPq
- Atatonic - a fresh CSS framework - http://bit.ly/4oOV2w (via @umutm)
- @HrvojeKC yes, that's an interesting idea. Maybe when the waiting is over, we'll write a detailed post about it.
- @benbeltran thanks, Ben, your support means a lot to us.
- @dandenney thanks for the nice words, Dan - really appreciate it.
- @TheKheiron well, it's not entirely our fault. But we will certainly learn a lot from this horrible experience.

















































I got lost in this source!
: )