
Smashing Magazine we smash you with the information that will make your life easier. really.
53 CSS-Techniques You Couldn’t Live Without
January 19th, 2007 in CSS | 893 Comments
CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actualy, it is.
Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time - of course, if you are able to find them in time. Below you’ll find a list of techniques we , as web-architects, really couldn’t live without. They are essential and they indeed make our life easier. Let’s take a look at 53 CSS-based techniques you should always have ready to hand if you develop web-sites.
Thanks to all developers who contributed to accessible and usable css-based design over the last few years. We really appreciate it. Thanks!
You might want to take a look at the article Powerful CSS-Techniques For Effective Coding.
3. CSS Tabs
4. CSS Bar Graphs (CSS For Bar Graphs)
5. Collapsing Tables: An Example
6. Adam’s Radio & Checkbox Customisation Method
8. CSS Shadows (CSS Shadows Roundup)
9. CSS Rounded Corners Roundup (Nifty Corners)
10. Drop Cap - Capital Letters with CSS
11. Define Image Opacity with CSS
12. How to Create a Block Hover Effect for a List of Links
13. Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS
14. CSS Diagrams
15. CSS Curves
16. Footer Stick allows for the footer of a Web page to appear either at the bottom of the browser window or the bottom of the Web page content – whichever is visually lowest.
17. CSS Image Map
18. CSS Image Pop-Up
20. CSS Image Replacement for Buttons
21. Link Thumbnail
22. CSS Map Pop
23. PHP-based CSS Style Switcher
24. CSS Unordered List Calender (CSS Styled Calender)
25. CSS-Based Forms: Techniques
26. CSS-Based Tables: Techniques
27. Printing Web-Documents and CSS
28. Improved Links-Display for Print-Layouts with CSS
30. CSS Teaser Box
31. CSS Tricks for Custom Bullets
33. CSS Zooming
34. Creating a Star Rater using CSS
35. The ways to style visited Links
36. PDF, ZIP, DOC Links Labeling
37. Displaying Percentages with CSS
38. Image Floats without the Text Wrap
39. Let visitors decide, whether or not will they open link in a new window
40. Simple accessible external links
41. Zebra Table with JavaScript and CSS
42. Vertical Centering with CSS (Horizontal and Vertical Centering with CSS
44. Image Caption with CSS (Styled Images with Caption)
47. Hierarchical Sitemap with CSS
48. Snook’s Resizable Underlines
49. Switchy McLayout: An Adaptive Layout Technique





















































Christian Watson (January 19th, 2007, 9:12 am)
Great list, but I think you should include CSS drop down menus too. Here’s a great example: Link [www.cssplay.co.uk]
J David (January 19th, 2007, 10:09 am)
fantastic list. some of these are techniques that I didn’t know existed but should have been using all along…
sandro (January 19th, 2007, 12:40 pm)
Excellent work! My del.icio.us account just became 10x more valuable to me! Thanks
juixe (January 19th, 2007, 1:07 pm)
Woah, that is a great freaking list!! I now know what I’ll be reading over this weekend.
Marquis (January 19th, 2007, 1:47 pm)
This is a pretty neat article. I knew about most of these features, but some of the things you are able to do with CSS leave me speechless! Thanks for this article!
Felix (January 19th, 2007, 2:10 pm)
thx for compiling this, it really helps. Lots of the techniques that I didn’t know.
Tommy (January 19th, 2007, 2:43 pm)
Great list. This site is definately bookmarked on my browser. I can spend hours on end just reading available posts. Very much appreciated.
Faitoo (January 19th, 2007, 2:48 pm)
Awesome. Great Compilation.
Victor (January 19th, 2007, 3:43 pm)
Thanx a lot!
Now I know many things about CSS.
Ganesh (January 19th, 2007, 4:11 pm)
^:)^
tech (January 19th, 2007, 4:18 pm)
wonderful resource for webmasters, thank you the webmaster :)
The Doc (January 19th, 2007, 4:28 pm)
just great
thx!
stan (January 19th, 2007, 4:29 pm)
nice list- thank you so much for the time invested :)
Tony Narlock (January 19th, 2007, 4:41 pm)
This is it, this is what people are looking for… Absolutely wonderful — Keep this page up…
Darklight (January 19th, 2007, 5:10 pm)
great list, thanks for sharing!
Maurizio (January 19th, 2007, 5:11 pm)
Very cool, and useful, list.
Thank you!
Max Perlov (January 19th, 2007, 5:25 pm)
May be you should add some samples from
Javascript drag&drop libraries review (http://www.ajaxpath.com/drag-and-drop/), that was also highly valued in Digg and Stumbleupon?
vic (January 19th, 2007, 6:16 pm)
Great!!
But “47. Hierarchical Sitemap with CSS” link doesn’t work.
Carlos Eduardo (January 19th, 2007, 6:20 pm)
Very, very good list!
It will help us a lot, when we need some particular CSS technique.
Thank you again ;)
marc (January 19th, 2007, 6:40 pm)
Great collection!
Thanks alot…
Dirk Ginader (January 19th, 2007, 7:22 pm)
Trackback:
Das Smashing Magazine listet die 53 lebenswichtigen CSS-Techniken
Gerade erschien im Smashing Magazine der Artikel 53 CSS-Techniques You Couldn’t Live Without.
Der Artikel stellt eine quasi vollständige Liste aller wichtigen CSS-Techniken der letzten 2 Jahre dar.
Jeder der sich mit CSS beschäftigt sollte meiner Meinung nach
volkan karakus (January 19th, 2007, 9:01 pm)
Great List! I bookmarked this page on my browser. Thanks for your works!
Sean (January 19th, 2007, 9:17 pm)
This is a great collection of CSS-related links. Thank you very much!
Nicholas (January 19th, 2007, 10:59 pm)
Great list! #25 is a broken link.
Jyot (January 19th, 2007, 11:07 pm)
An awesome collection. Thanks for your hard work. I may have stumbled upon some of these sites on the web but finding everything in one place is great.
Ron (January 19th, 2007, 11:09 pm)
Amazing. Words fail me here; every web designer out there should go through this with a fine-toothed comb.
Jan (January 19th, 2007, 11:31 pm)
I think you could also add my chameleon colors script to this list,
It allows affiliates of a site (or designers) to toggle colors between all hex colors for a given site without changing the images of code.
Ro (January 20th, 2007, 12:17 am)
This is a very nice list. I don’t do very much css anymore, but this is a reason to get back in their and tinker with things.
r.
Zen (January 20th, 2007, 12:34 am)
An excellent collection of links.
Thanks!
kdoteje.be (January 20th, 2007, 2:26 am)
great post.. 10x
Jesper Rønn-Jensen (January 20th, 2007, 3:41 am)
Thanks a lot. A few new techniques to the collection :)
Daniel (January 20th, 2007, 7:11 am)
Link [www.dtp-blog.de]
Valics Lehel (January 20th, 2007, 7:54 am)
Indeed, a NICE list. I think it will be usefull in our projects.
David G. Paul (January 20th, 2007, 5:56 pm)
very cool
shpyo (January 21st, 2007, 5:16 am)
It’s soooo k3wl collection!!!!!!!
nnmd (January 21st, 2007, 9:23 pm)
Great stuff! Trying to realize some of these techniques on my own site.
Matthias Mauch (January 21st, 2007, 9:31 pm)
Great tips, but the one about the text size switcher isn’t a real css-technique. Does anybody know a sample without Javascript?
Aside from that, the CSS shadow tip is a great simple example which I will use in the next time. Thanks for this short description about CSS shadows.
cenourinha (January 21st, 2007, 9:52 pm)
Great…
I get the submit css buttons on Link [www.appletuga.com] and it works fine…
:)
Jake Rutter (January 21st, 2007, 10:24 pm)
Great Resources, I love seeing lists like this, Well Done!
Saeid Zebardast (January 21st, 2007, 10:39 pm)
Thanks!
alvanweb (January 22nd, 2007, 1:10 am)
Very cool.It’s a great resource,Thanks.
TimM (January 22nd, 2007, 1:13 am)
Good list - but you should point out the hidden problem with CSS… every browser does it differently! So we are back to the bad old day of loading up every version of all the latest browsers and trying it out.
Anyway - it would be good to indicate which browsers each of these tips has been tried on (e.g. IE6,7, Firefox 1.5, 2, Opera, MAc etc).
Can’t help but think in the interest of purity we took several steps backward until the industry sorts itself out again. Shame really.
Tim
Chris (January 22nd, 2007, 3:33 am)
Awesome help!
Thanks!
volkan.ozcelik (January 22nd, 2007, 5:17 am)
Great collection!
Instantly saved to my list of CSS resources:
Link [www.linkibol.com]
Thank you very much for creating this invaluable list.
It will be a great time-saver in my next project.
That’s simply incredible.
Cheers.
asdf (January 22nd, 2007, 5:22 am)
Christ, is your headline big enough?
Torley (January 22nd, 2007, 5:45 am)
What an amazing compilation, with preview images too! Incredible. How much time did you take to do this? In any case, I hope you know it’s certainly worth it — from my eyes, anyhoo! I’ve bookmarked this for future reference. :)
chris (January 22nd, 2007, 12:51 pm)
awesome.
totally awesome.
thats my reading material for the next few weeks sorted then. thanks for such a rich list of quality material!
Sardionerak (January 22nd, 2007, 1:12 pm)
You are my hero! I am not kidding. This will make my life so much easier, you have no idea! Thank you, thank you, thank you!
Komal (January 22nd, 2007, 2:51 pm)
This is incredible. I didnt know many of these tehcniques existed. Thanks a ton.
Ramana (January 22nd, 2007, 5:38 pm)
Fantastic collection… This is one great list of CSS Wonders… Thanks a lot!!!
separatelife.de (January 22nd, 2007, 6:09 pm)
[…} Das Smashing Magazine hat sich die Mühe gemacht, 53 wundervolle CSS-Techniken zusammenzutragen, […]
separatelife.de (January 22nd, 2007, 6:09 pm)
[…} Das Smashing Magazine hat sich die Mühe gemacht, 53 wundervolle CSS-Techniken zusammenzutragen, [. ..]
Mr Teacher (January 22nd, 2007, 6:18 pm)
Really great list and will help teaching and learning of this area tremendously. Thanks!!
Ross (January 22nd, 2007, 6:29 pm)
Great list! A few things that I’ve done differently in the past, but will be CSSing in the future.
nSolutions4u (January 22nd, 2007, 8:01 pm)
I would like to have a “Navigation Matrix” but with the tabs having a dynamic width and not a fixed one, anyone knows how to do it with CSS? I’ve done it “by code” in my site, Link [nsolutions4u.com] but I would like to have it done in a simpler way… All help appreciated.
Ramon Bispo (January 22nd, 2007, 8:04 pm)
Wow!! Great list!
daweed (January 22nd, 2007, 8:22 pm)
a very interesting article with a good collection of link and démo… thank a lot.
jackandjacks.com (January 23rd, 2007, 2:02 am)
Very nice presentation of the collection. Thanks. Makes it easy to cull through and see the ones I should be adding to the arsenal.
Ali (January 23rd, 2007, 4:07 am)
Great effects!!
I love them
can i use them in my designs?
devnull_ (January 23rd, 2007, 4:21 am)
This blog is great. Read it every day (or atleast when some new stuff is coming up) and the content rocks!
Please provide more like this.
Cheers.
Stefan (January 23rd, 2007, 5:13 am)
nice collection here … thanks a lot …
Alex (January 23rd, 2007, 1:24 pm)
Excellent. Just need time to apply a few of the listed ideas and techniques to my websites.
Rack Lin (January 23rd, 2007, 2:23 pm)
Great and Useful!!
CSS + jQuery , it change the way that i design web.
The-Phone.net (January 23rd, 2007, 4:30 pm)
Nice. Very useful information. Before visiting this page I knew only 10 techniques.
dieter (January 23rd, 2007, 8:39 pm)
Great reading! Definitely worth a bookmark.
Certainly the calendar as an unordered list was new to me!
Keep up the good work.
Chin Yong (January 23rd, 2007, 11:55 pm)
Wow, this is a really great list of CSS tricks. Thanks for the collection.
Joshua Kaufman (January 24th, 2007, 12:47 am)
If you’d like to create CSS Tabs without images try Link [unraveled.com]
200th reply from SecureSlash.com (January 24th, 2007, 1:31 am)
really amazing collection you SMASH buddy.
Ben Strackany (January 24th, 2007, 9:19 am)
Kudos, this is really helpful! I can finally make some attractive web sites …
Mark (January 24th, 2007, 1:52 pm)
nice list and documented, thanks for this
Eoin (January 24th, 2007, 7:58 pm)
Stumbled on this easier shadow css after reading the two listed above:
Eoin (January 24th, 2007, 8:00 pm)
Stumbled on this easier shadow css after reading the two listed above:
img … style = “border: 5px outset; border-left-width: 0px; border-top-width: 0px;
Xplora (January 24th, 2007, 8:07 pm)
Great reading! Thank you.
And yes, a lot of work to do here for some days.
Keep up the good work in the blog.
loige (January 25th, 2007, 6:46 am)
Great! I’ll always keep those suggestions in mind :)
Sven Tietje (January 25th, 2007, 3:06 pm)
thanks for this great list!
SvT (January 25th, 2007, 5:30 pm)
Thanks!!.. ;)
antsae (January 28th, 2007, 1:34 am)
Very good article that i have posted on my blog. Thanks for the information.
Regards
Finert (January 28th, 2007, 2:42 pm)
it is superb
Sergman - (January 29th, 2007, 12:47 am)
This is the best list ever. Thank you for helping us.
usuario conocido (January 29th, 2007, 9:53 pm)
Thanks, I guess this was the last drop I needed to start building a web site I always dream about.
albertolevin.wordpress.com/
Kent Larsson (January 29th, 2007, 10:56 pm)
Some of the links doesn’t work any more. Could you please look through them and perhaps update if you know where they went. That said. Lots of good information! Many thanks.
clickmedia webdesign (January 30th, 2007, 1:04 am)
Excelent list !!
Thank You !!!
Perminder Singh (January 30th, 2007, 4:39 pm)
Good to have goodies… thanks
loige (January 30th, 2007, 8:25 pm)
The one to style the rating stars is great! ;)
gio (January 31st, 2007, 12:44 pm)
wow, thank you for this very informative CSS tips and tricks. Im bookmarking this site now.
Eliseo (February 2nd, 2007, 6:25 pm)
thanks, thanks, thanks to favorite!!
BillyChow (February 5th, 2007, 2:36 pm)
whooa!
so cool!
Balakumar Muthu (February 6th, 2007, 9:58 pm)
GREAT list … thanks!
xintao (February 6th, 2007, 11:29 pm)
太美了,梦寐以求的东西,感谢,学习!
omid jazini (February 7th, 2007, 3:27 pm)
this is very helpful! thanks
Panos (February 7th, 2007, 7:10 pm)
Here is a really cool Password Generator that is not on the list. Requires WPF Installed. :(
Link [www.nevrokode.net]
S. Gandhi (February 10th, 2007, 3:55 pm)
Excellent Compilation. Very useful tips all on one page.
vibhash (February 11th, 2007, 3:33 am)
Excillent share…thanks a lot for that post:)
d2s (February 11th, 2007, 9:39 pm)
Thanks much for this list. Part of the list was already known to me but it’s always nice to get list with them (and many other interesting techniques).
Shamsath (February 12th, 2007, 1:04 am)
A very useful list!! got to know about things which i never knew before
Bram (February 12th, 2007, 2:55 am)
a true goldmine I struck.
thanks a bunch!
merolhack (February 13th, 2007, 2:40 am)
Hola, puse el articulo en mi sitio.
Link [www.foss.uni.cc]
Saludos
Alfredo (February 13th, 2007, 3:32 pm)
thanks for this. I am actually going to attend a CSS workshop on Feb 25 organized by Benj Arriola.
jojje (February 13th, 2007, 8:55 pm)
Fantastic list! Appreciate the effort to compile it. *Bookmarked*
simplytaps (February 14th, 2007, 8:04 pm)
Great work, now I have a reason to be busy this weekend.
buddy (February 17th, 2007, 12:23 am)
thanks… this information helps beginner like me.
muztagh (February 20th, 2007, 4:38 am)
Thank you, it is so useful!
Goran (February 20th, 2007, 9:07 pm)
Thanks for all, Greetings from Serbia!
Rodrigo (February 20th, 2007, 9:22 pm)
simply AWESOME!!!
Congratulations!!
Rodrigo
Andriy A. (February 21st, 2007, 7:05 pm)
Awesome! This is a great list! But I can add some drop down menus to make CSS-Techniques COMPLITE list.
software engineering (February 22nd, 2007, 2:10 pm)
Informative and Usefull Resources. Really Awesome
bulmam (February 23rd, 2007, 12:19 am)
I love this list and I agree with your choices !
thank you very much, I have discovered many things !
Sreedhar Vankayala (February 23rd, 2007, 8:58 am)
Hi,
I would like to download all these 53 CSS - articles either as HTML, DOC or PDF format.
If anyone has a list or how to do it, let me know and thanks in advance.
Regards,
Sreedhar Vankayala
dominik (February 26th, 2007, 3:36 am)
elo, elo
zajebiste to wszystko :)
just4look (February 28th, 2007, 10:12 pm)
It’s what I am looking for. It’s a marvelous art work.
Abdullah (March 1st, 2007, 1:25 pm)
Wow awesome techniques, thanks a lot for compiling such a great list.
DeadLy (March 1st, 2007, 9:48 pm)
Perfectt css sets. Thanks
steffen (March 2nd, 2007, 6:26 am)
great list - thanks!
xuguilin (March 7th, 2007, 5:12 pm)
好东西,谢谢了。
Southafrican (March 9th, 2007, 11:41 am)
Les’t we forget the fine work of Rich Accessible Typography for the Masses, otherwize known as sIFR Link [www.mikeindustries.com]
fandango (March 9th, 2007, 8:44 pm)
Very good tips for all developers.. thank you!
tony (March 18th, 2007, 11:20 am)
awesome
Tommie (March 28th, 2007, 3:44 am)
Great list, love it!
mahdi (March 29th, 2007, 3:52 pm)
good job
Kenneth Mark (March 31st, 2007, 4:34 pm)
Amazing collection, definetly a great web resource !
Robert (April 5th, 2007, 2:33 am)
Great job!
I’m working on a mayor project (something like flickr) and this is very helpful. Whithout this list I would be spendig a lot of time searching for great ideas to implement - now it’s very, very easy and a lot of fun!
Thank you very much :)
DocZayus (April 6th, 2007, 12:13 am)
WOW !!!!
Just “Stumbled” here, and wow !!
this rules!
dennis (April 6th, 2007, 11:05 am)
apt-get install 53css-techniques
Michael Bessolov (April 7th, 2007, 12:02 pm)
Just an amazing collection!
Thank you guys!
Nikolay Kolev (April 10th, 2007, 2:57 pm)
Thanks, guys! Hopefully you will periodically update this useful list. Thanks again!
Slave (April 10th, 2007, 4:13 pm)
Wow. Just wow! :)
Rhys (April 10th, 2007, 4:37 pm)
This is going straight to the top of my web design bookmarks list.
Thanks!
dankos (April 10th, 2007, 7:27 pm)
Thanks, guys!
but is there any software for create automatic css?
tyler (April 11th, 2007, 5:56 am)
What, Link [www.longren.org] isn’t cool enough for this list?
I, for one, could not live without that CSS linked above to wrap long lines of text.
This list dissapoints me a little, I could live without 95% of the CSS listed, no problem. There’s 3-4 graphing methods listed, come on. I must admit though, Link [www.barenakedapp.com] is pretty slick. Minimalism at it’s finest.
Seriously though, good list overall. Some very unique pieces of CSS in there. All the list is missing is Link [www.longren.org].
Hiran Chatura (April 11th, 2007, 1:19 pm)
These css techniques very useful to me. But I couldn’t find exactly what I need. (Grid Scroll Table). If anybody can give me help that will be very very useful to me!!!
Mamoun Rahhal (April 12th, 2007, 7:05 pm)
thank you very much, Nice job, I apreciate that
Hakon Atli Halldorsson (April 15th, 2007, 1:15 am)
Wow, awesome job mates :)
Me + You = Babies
AnissaT (April 16th, 2007, 4:10 am)
Bless You Bless You Bless You Bless You Bless You Bless You Bless You Bless You Bless You Bless You Bless You Bless You Bless You Bless You Bless You Bless You !
This absolutely ROCKS.
buchin (April 21st, 2007, 12:20 pm)
found this page from stumble upon. great list
11amDesign.com (April 22nd, 2007, 12:08 am)
Great collection to choose from - I’m going to use some of these myself. Thanks!
Ben (April 22nd, 2007, 9:24 am)
Absolutely incredible resource. Thanks for making this readily available.
Ali7 (April 23rd, 2007, 5:17 pm)
Awesome List !
Richie (May 3rd, 2007, 4:56 pm)
Awesome post!
I have to say this post is very helpful!
Bali Web Design (May 3rd, 2007, 10:17 pm)
CSS-Techniques You Couldn’t Live Without. Amazing post. And very helpful.
Kiaora (May 6th, 2007, 9:52 am)
The best collection of CSS articles so far…
Many thanks to everyone who posted here their hard work for free, so that all lazy a*sses can take advantage and pretend it’s their own work.
Cheers
Lola K (May 8th, 2007, 6:57 pm)
Great collection. Thank you for sharing.
lorenza (May 10th, 2007, 12:34 am)
Awesome! This is a great list
lorenza (May 10th, 2007, 12:35 am)
This is a great list
Christian Pfeil (May 14th, 2007, 3:51 pm)
Hi!
Great list! Thank you.
Cheers!
Christian Pfeil
Eric (May 14th, 2007, 5:54 pm)
Very fine. Thanks for the nice tipps.
Marcelo Macedo (May 14th, 2007, 10:20 pm)
Amazing List!
Marcelo Macedo
Brazil
Pogung177 (May 19th, 2007, 4:52 am)
very excelent colection, I’ve implement #9 but it only work for Firefox browser
AL__ (May 23rd, 2007, 2:25 am)
Lovely to see such a wonderful site. Thank you
Piratex (May 24th, 2007, 4:02 am)
GREAT tips, great thanks !
zubin (May 25th, 2007, 4:29 am)
great links….great list….all at one place….!!
Bali Web Designer (May 28th, 2007, 9:21 am)
thanks for the tips. it make me more powerfull to design a website using CSS
Amanda (May 30th, 2007, 7:52 am)
Awesome
this is a great learning experience its opened my eyes with Informative and very useful Resources. Thank you
login (June 5th, 2007, 7:25 am)
Super site darlings. Thanks awfully
sliming (June 5th, 2007, 9:49 pm)
%-) genuinely interested by this website
Bilaal (June 6th, 2007, 8:23 am)
Coool collection of CSS with v good info Thank You
John (June 9th, 2007, 8:50 am)
Thanks for the list, really appreciated
kirn (June 11th, 2007, 1:55 am)
I’m working on a project and this is very helpful. Without this list I would be spendig a lot of time searching for great ideas to implement - now it’s very, very easy and a lot of fun!
Thank you very much :)
aleem (June 12th, 2007, 3:12 pm)
I’ve been searhing for this tecniqes for a long time, at last i found it….I haven’t seen such a amazing list.
thanks for the creators…
Donny (June 14th, 2007, 2:02 pm)
Great!, most powerful tutorial and tips ever!.
Tiago Floriano (June 17th, 2007, 11:18 am)
very good! Congratulations!
graham (June 18th, 2007, 8:55 pm)
excellent resource, thanks!
ramesh (June 20th, 2007, 3:03 pm)
Mind blowing…..muahhhhhhhhhhh!!!
skyjuice (June 21st, 2007, 2:17 pm)
i just notice this post T_T its ultra good.
Geoff (June 22nd, 2007, 11:54 pm)
Now im going to have to put my prices up by 25%.
Dam you smashingmagazine!! for letting the cat outta the bag! :)
joking.