53 CSS-Techniques You Couldn’t Live Without


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, actually, 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. Links checked: June/11 2008.

You might want to take a look at the article Powerful CSS-Techniques For Effective Coding1.

1. CSS Based Navigation2


2. Navigation Matrix Reloaded4


3. CSS Tabs6


4. CSS For Bar Graphs8


5. Collapsing Tables: An Example10


6. Adam’s Radio & Checkbox Customisation Method12


7. CSS Image Replacement14


8. CSS Shadows (CSS Shadows Roundup16)


9. CSS Rounded Corners Roundup17 (Nifty Corners18)


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 Links20


13. Pullquotes with CSS22 (Automatic Pullquotes with JavaScript and CSS23


14.CSS Diagrams


15. CSS Curves25


16. Footer Stick27 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 Map29


18. CSS Image Pop-Up31


19. CSS Image Preloader33


20. CSS Image Replacement for Buttons35


21. Link Thumbnail37


22. CSS Map Pop39


23. PHP-based CSS Style Switcher41


24. CSS Unordered List Calender43 (CSS Styled Calender44)


25. CSS-Based Forms: Techniques46


26. CSS-Based Tables: Techniques48


27. Printing Web-Documents and CSS50


28. Improved Links-Display for Print-Layouts with CSS52


29. CSS-Submit Buttons

30. CSS Teaser Box54


31. CSS Tricks for Custom Bullets56


32. Ticked Off Links Reloaded58


33. CSS Zooming60


34. Creating a Star Rater using CSS62


35. The ways to style visited Links64


36. PDF, ZIP, DOC Links Labeling66


37. Displaying Percentages with CSS68


38. Image Floats without the Text Wrap70


39. Let visitors decide, whether or not will they open link in a new window72


40. Simple accessible external links74


41. Zebra Table with JavaScript and CSS76


42. Vertical Centering with CSS78 (Horizontal and Vertical Centering with CSS79


43. Unobtrusive Sidenotes81


44. Image Caption with CSS83 (Styled Images with Caption84)


45. Dynamic Piechart with CSS86


46. Format Footnotes with CSS88


47. Hierarchical Sitemap with CSS90


48. Snook’s Resizable Underlines92


49. Switchy McLayout: An Adaptive Layout Technique94


50. StyleMap: CSS+HTML Visual Sitemap96


51. Custom Reading Width98


52. CSS Alert Message100


53. CSS Production Notes102



  1. 1 http://www.smashingmagazine.com/2008/02/21/powerful-css-techniques-for-effective-coding/
  2. 2 http://www.nundroo.com/navigation/
  3. 3 http://www.nundroo.com/navigation/
  4. 4 http://superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/
  5. 5 http://superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/
  6. 6 http://exploding-boy.com/images/cssmenus/menus.html
  7. 7 http://exploding-boy.com/images/cssmenus/menus.html
  8. 8 http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55
  9. 9 http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55
  10. 10 http://icant.co.uk/sandbox/footercollapsetables/
  11. 11 http://icant.co.uk/sandbox/footercollapsetables/
  12. 12 http://www.flog.co.nz/lab/ARC/ARC.htm
  13. 13 http://www.flog.co.nz/lab/ARC/ARC.htm
  14. 14 http://www.mezzoblue.com/tests/revised-image-replacement/
  15. 15 http://www.mezzoblue.com/tests/revised-image-replacement/
  16. 16 http://web-graphics.com/mtarchive/001589.php
  17. 17 http://www.smileycat.com/miaow/archives/000044.php#nojavascript
  18. 18 http://www.smileycat.com/miaow/archives/000044.php#nojavascript
  19. 19 http://www.smileycat.com/miaow/archives/000044.php#nojavascript
  20. 20 http://www.smileycat.com/miaow/archives/000230.php
  21. 21 http://www.smileycat.com/miaow/archives/000230.php
  22. 22 http://www.sitepoint.com/test/pullquote.htm
  23. 23 http://www.456bereastreet.com/archive/200609/automatic_pullquotes_with_javascript_and_css/
  24. 24 http://www.sitepoint.com/test/pullquote.htm
  25. 25 http://storage.couchfort.net/cssCurves/
  26. 26 http://storage.couchfort.net/cssCurves/
  27. 27 http://www.themaninblue.com/experiment/footerStickAlt/
  28. 28 http://www.themaninblue.com/experiment/footerStickAlt/
  29. 29 http://www.frankmanno.com/ideas/css-imagemap/
  30. 30 http://www.frankmanno.com/ideas/css-imagemap/
  31. 31 http://moneytreesystems.com/css/picpopup.html
  32. 32 http://moneytreesystems.com/css/picpopup.html
  33. 33 http://snipplr.com/view/2122/css-image-preloader/
  34. 34 http://snipplr.com/view/2122/css-image-preloader/
  35. 35 http://www.ampsoft.net/webdesign-l/image-button.html
  36. 36 http://www.ampsoft.net/webdesign-l/image-button.html
  37. 37 http://lab.arc90.com/2006/07/link_thumbnail.php
  38. 38 http://lab.arc90.com/2006/07/link_thumbnail.php
  39. 39 http://mikecherim.com/experiments/css_map_pop.php
  40. 40 http://mikecherim.com/experiments/css_map_pop.php
  41. 41 http://mikecherim.com/gbcms_xml/news_page.php?id=12
  42. 42 http://mikecherim.com/gbcms_xml/news_page.php?id=12
  43. 43 http://mikecherim.com/gbcms_xml/news_page.php?id=0
  44. 44 http://veerle.duoh.com/blog/comments/a_css_styled_calendar/
  45. 45 http://mikecherim.com/gbcms_xml/news_page.php?id=0
  46. 46 http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
  47. 47 http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
  48. 48 http://www.smashingmagazine.com/2006/12/29/css-based-tables-modern-solutions/
  49. 49 http://www.smashingmagazine.com/2006/12/29/css-based-tables-modern-solutions/
  50. 50 http://css-discuss.incutio.com/?page=PrintStylesheets
  51. 51 http://css-discuss.incutio.com/?page=PrintStylesheets
  52. 52 http://www.alistapart.com/articles/improvingprint/
  53. 53 http://www.alistapart.com/articles/improvingprint/
  54. 54 http://www.456bereastreet.com/lab/teaser/
  55. 55 http://www.456bereastreet.com/lab/teaser/
  56. 56 http://www.macworld.com/2005/12/secrets/januarycreate/index.php
  57. 57 http://www.macworld.com/2005/12/secrets/januarycreate/index.php
  58. 58 http://www.colly.com/index.php?/weblog/comments/ticked_off_links_reloaded
  59. 59 http://www.colly.com/index.php?/weblog/comments/ticked_off_links_reloaded
  60. 60 http://www.deltatangobravo.com/images/zoom/
  61. 61 http://www.deltatangobravo.com/images/zoom/
  62. 62 http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/
  63. 63 http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/
  64. 64 http://webdesign.maratz.com/lab/visited_links_styling/
  65. 65 http://webdesign.maratz.com/lab/visited_links_styling/
  66. 66 http://webdesign.maratz.com/lab/pdf_links_labeling/
  67. 67 http://webdesign.maratz.com/lab/pdf_links_labeling/
  68. 68 http://www.barenakedapp.com/the-design/displaying-percentages
  69. 69 http://www.barenakedapp.com/the-design/displaying-percentages
  70. 70 http://ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/
  71. 71 http://ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/
  72. 72 http://webdesign.maratz.com/lab/new_window_link/
  73. 73 http://webdesign.maratz.com/lab/new_window_link/
  74. 74 http://www.maxdesign.com.au/presentation/external/
  75. 75 http://www.maxdesign.com.au/presentation/external/
  76. 76 http://24ways.org/2005/splintered-striper
  77. 77 http://24ways.org/2005/splintered-striper
  78. 78 http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
  79. 79 http://www.456bereastreet.com/lab/centered/both/
  80. 80 http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
  81. 81 http://lab.arc90.com/2006/05/unobtrusive_sidenotes.php
  82. 82 http://lab.arc90.com/2006/05/unobtrusive_sidenotes.php
  83. 83 http://lab.arc90.com/2006/07/image_caption_1.php
  84. 84 http://www.boagworld.com/archives/2006/07/styled_images_with_caption.html
  85. 85 http://lab.arc90.com/2006/07/image_caption_1.php
  86. 86 http://petewilliamsagency.com/css/examples/pie/
  87. 87 http://petewilliamsagency.com/css/examples/pie/
  88. 88 http://www.brandspankingnew.net/archive/2005/07/format_footnote.html
  89. 89 http://www.brandspankingnew.net/archive/2005/07/format_footnote.html
  90. 90 http://www.alexandersperl.de/tutorials/css/sitemap.html
  91. 91 http://www.alexandersperl.de/tutorials/css/sitemap.html
  92. 92 http://www.colly.com/index.php?/weblog/comments/snooks_resizable_underlines/
  93. 93 http://www.colly.com/index.php?/weblog/comments/snooks_resizable_underlines/
  94. 94 http://www.alistapart.com/articles/switchymclayout
  95. 95 http://www.alistapart.com/articles/switchymclayout
  96. 96 http://www.scottjehl.com/v7/index.php/process/stylemap_visual_sitemap/
  97. 97 http://www.scottjehl.com/v7/index.php/process/stylemap_visual_sitemap/
  98. 98 http://www.devlounge.net/articles/custom-reading-width-beta
  99. 99 http://www.devlounge.net/articles/custom-reading-width-beta
  100. 100 http://www.bioneural.net/2006/04/01/create-a-valid-css-alert-message/
  101. 101 http://www.bioneural.net/2006/04/01/create-a-valid-css-alert-message/
  102. 102 http://24ways.org/2006/css-production-notes
  103. 103 http://24ways.org/2006/css-production-notes

↑ 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, online workshops and loves solving complex performance problems in large companies. Get in touch.


Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    fantastic list. some of these are techniques that I didn’t know existed but should have been using all along…

  2. 2

    Excellent work! My del.icio.us account just became 10x more valuable to me! Thanks

  3. 3

    Woah, that is a great freaking list!! I now know what I’ll be reading over this weekend.

  4. 4

    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!

  5. 5

    Great list. This site is definately bookmarked on my browser. I can spend hours on end just reading available posts. Very much appreciated.

  6. 6

    Awesome. Great Compilation.

  7. 7

    Thanx a lot!
    Now I know many things about CSS.

  8. 8

    wonderful resource for webmasters, thank you the webmaster :)

  9. 9

    just great

  10. 10

    nice list- thank you so much for the time invested :)

  11. 11

    This is it, this is what people are looking for… Absolutely wonderful — Keep this page up…

  12. 12

    great list, thanks for sharing!

  13. 13

    Very cool, and useful, list.
    Thank you!

  14. 14

    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?

  15. 15


    But “47. Hierarchical Sitemap with CSS” link doesn’t work.

  16. 16

    Very, very good list!

    It will help us a lot, when we need some particular CSS technique.

    Thank you again ;)

  17. 17

    Great collection!

    Thanks alot…

  18. 18

    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

  19. 19

    Great List! I bookmarked this page on my browser. Thanks for your works!

  20. 20

    thx for compiling this, it really helps. Lots of the techniques that I didn’t know.

  21. 21

    This is a great collection of CSS-related links. Thank you very much!

  22. 22

    Great list! #25 is a broken link.

  23. 23

    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.

  24. 24

    Amazing. Words fail me here; every web designer out there should go through this with a fine-toothed comb.

  25. 25

    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.

  26. 26

    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.


  27. 27

    An excellent collection of links.


  28. 28

    Jesper Rønn-Jensen

    January 20, 2007 3:41 am

    Thanks a lot. A few new techniques to the collection :)

  29. 29

    Indeed, a NICE list. I think it will be usefull in our projects.

  30. 30

    very cool

  31. 31

    It’s soooo k3wl collection!!!!!!!

  32. 32

    Great stuff! Trying to realize some of these techniques on my own site.

  33. 33

    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.

  34. 34

    Great Resources, I love seeing lists like this, Well Done!

  35. 35

    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.


  36. 36

    Awesome help!

  37. 37

    Christ, is your headline big enough?

  38. 38

    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. :)

  39. 39

    totally awesome.

    thats my reading material for the next few weeks sorted then. thanks for such a rich list of quality material!

  40. 40

    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!

  41. 41

    This is incredible. I didnt know many of these tehcniques existed. Thanks a ton.

  42. 42

    Fantastic collection… This is one great list of CSS Wonders… Thanks a lot!!!

  43. 43

    Really great list and will help teaching and learning of this area tremendously. Thanks!!

  44. 44

    Great list! A few things that I’ve done differently in the past, but will be CSSing in the future.

  45. 45

    Wow!! Great list!

  46. 46

    a very interesting article with a good collection of link and démo… thank a lot.

  47. 47

    Great effects!!
    I love them
    can i use them in my designs?

  48. 48

    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.


  49. 49

    nice collection here … thanks a lot …

  50. 50

    Excellent. Just need time to apply a few of the listed ideas and techniques to my websites.

  51. 51

    Great and Useful!!

    CSS + jQuery , it change the way that i design web.

  52. 52

    Great reading! Definitely worth a bookmark.
    Certainly the calendar as an unordered list was new to me!
    Keep up the good work.

  53. 53

    Wow, this is a really great list of CSS tricks. Thanks for the collection.

  54. 54

    Kudos, this is really helpful! I can finally make some attractive web sites …

  55. 55

    nice list and documented, thanks for this

  56. 56

    Stumbled on this easier shadow css after reading the two listed above:

  57. 57

    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;

  58. 58

    Great reading! Thank you.
    And yes, a lot of work to do here for some days.
    Keep up the good work in the blog.

  59. 59

    Great! I’ll always keep those suggestions in mind :)

  60. 60

    thanks for this great list!

  61. 61

    Thanks!!.. ;)

  62. 62

    Very good article that i have posted on my blog. Thanks for the information.

  63. 63

    it is superb

  64. 64

    This is the best list ever. Thank you for helping us.

  65. 65

    Thanks, I guess this was the last drop I needed to start building a web site I always dream about.


  66. 66

    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.

  67. 67

    Good to have goodies… thanks

  68. 68

    The one to style the rating stars is great! ;)

  69. 69

    wow, thank you for this very informative CSS tips and tricks. Im bookmarking this site now.

  70. 70

    thanks, thanks, thanks to favorite!!

  71. 71

    so cool!

  72. 72

    GREAT list … thanks!

  73. 73

    this is very helpful! thanks

  74. 74

    Excellent Compilation. Very useful tips all on one page.

  75. 75

    Excillent share…thanks a lot for that post:)

  76. 76

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

  77. 77

    A very useful list!! got to know about things which i never knew before

  78. 78

    a true goldmine I struck.

    thanks a bunch!

  79. 79

    thanks for this. I am actually going to attend a CSS workshop on Feb 25 organized by Benj Arriola.

  80. 80

    Fantastic list! Appreciate the effort to compile it. *Bookmarked*

  81. 81

    Great work, now I have a reason to be busy this weekend.

  82. 82

    thanks… this information helps beginner like me.

  83. 83

    Thank you, it is so useful!

  84. 84

    Thanks for all, Greetings from Serbia!

  85. 85

    simply AWESOME!!!



  86. 86

    Awesome! This is a great list! But I can add some drop down menus to make CSS-Techniques COMPLITE list.

  87. 87

    I love this list and I agree with your choices !
    thank you very much, I have discovered many things !

  88. 88

    Sreedhar Vankayala

    February 23, 2007 8:58 am


    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.


    Sreedhar Vankayala

  89. 89

    It’s what I am looking for. It’s a marvelous art work.

  90. 90

    Wow awesome techniques, thanks a lot for compiling such a great list.

  91. 91

    Perfectt css sets. Thanks

  92. 92

    great list – thanks!

  93. 93

    Les’t we forget the fine work of Rich Accessible Typography for the Masses, otherwize known as sIFR http://www.mikeindustries.com/sifr/

  94. 94

    Very good tips for all developers.. thank you!

  95. 95
  96. 96

    Great list, love it!

  97. 97
  98. 98

    Amazing collection, definetly a great web resource !

  99. 99

    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 :)

  100. 100

    WOW !!!!

    Just “Stumbled” here, and wow !!

    this rules!

  101. 101

    apt-get install 53css-techniques

  102. 102

    Michael Bessolov

    April 7, 2007 12:02 pm

    Just an amazing collection!
    Thank you guys!

  103. 103

    Thanks, guys! Hopefully you will periodically update this useful list. Thanks again!

  104. 104

    Wow. Just wow! :)

  105. 105

    This is going straight to the top of my web design bookmarks list.


  106. 106

    Thanks, guys!
    but is there any software for create automatic css?

  107. 107

    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!!!

  108. 108

    thank you very much, Nice job, I apreciate that

  109. 109

    Hakon Atli Halldorsson

    April 15, 2007 1:15 am

    Wow, awesome job mates :)

    Me + You = Babies

  110. 110

    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.

  111. 111

    found this page from stumble upon. great list

  112. 112

    Absolutely incredible resource. Thanks for making this readily available.

  113. 113

    Awesome List !

  114. 114

    Awesome post!
    I have to say this post is very helpful!

  115. 115

    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.

  116. 116

    Great collection. Thank you for sharing.

  117. 117

    Awesome! This is a great list

  118. 118

    This is a great list

  119. 119

    Christian Pfeil

    May 14, 2007 3:51 pm


    Great list! Thank you.


    Christian Pfeil

  120. 120

    Very fine. Thanks for the nice tipps.

  121. 121

    Amazing List!

    Marcelo Macedo

  122. 122

    very excelent colection, I’ve implement #9 but it only work for Firefox browser

  123. 123

    Lovely to see such a wonderful site. Thank you

  124. 124

    GREAT tips, great thanks !

  125. 125

    great links….great list….all at one place….!!

  126. 126


    this is a great learning experience its opened my eyes with Informative and very useful Resources. Thank you

  127. 127

    Super site darlings. Thanks awfully

  128. 128

    %-) genuinely interested by this website

  129. 129

    Coool collection of CSS with v good info Thank You

  130. 130

    Thanks for the list, really appreciated

  131. 131

    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 :)

  132. 132

    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…

  133. 133

    Great!, most powerful tutorial and tips ever!.

  134. 134

    very good! Congratulations!

  135. 135

    excellent resource, thanks!

  136. 136

    Mind blowing…..muahhhhhhhhhhh!!!

  137. 137

    i just notice this post T_T its ultra good.

  138. 138

    Now im going to have to put my prices up by 25%.

    Dam you smashingmagazine!! for letting the cat outta the bag! :)


  139. 139

    This is fantastic! List is simply amazing and i just can’t count how many times it could be useful. THANKS!

  140. 140

    just smashingmagazine!!!!

  141. 141

    giochi strategia

    June 28, 2007 6:53 pm

    I like your website ,and like to communicate with everyone on this issue!

  142. 142

    Awesome, nicely done –
    This is just so useful to me and i owe you a big thanks.


  143. 143

    Wonderful list thank you checking a few out now, bookmarked for later and might give the list a plug in my blog at some point. Very helpful, Thank you.

  144. 144

    This is going straight to the top of my web design bookmarks list.

    Thank you

  145. 145

    Thank you for your summary!!
    I was really surprised at current CSS technics!

  146. 146

    Cool list! Thanks for creating it…

  147. 147

    Fantastic post, i want use your suggestion for beauty my herboristic site.

    Ha ve a nice day

  148. 148

    I like the popup realtor image can this be done with frontpage?

  149. 149

    Robsuke Daisuke

    July 28, 2007 4:02 pm

    I can live without these and I prefer to do so – I’m a webdesigner and for that reason I have quite a few different browsers installed for just checking how things work (even three different versions of Internet Explorer even though I run linux – I need them because IE is the most used and it gives the most problems too). I follow the KISS princible (Keep It Simple Stupid), I write clear, simple and 100% correctly validating HTML and CSS code – and yet things often get messed up, mostly with IE but other browsers sometimes have weird problems too. Not one of them follows the standard well enough to work always correctly even when using just simple styling.

    I wonder if I launched all my different browsers and checked all these tricks through, how many of them would not have any problems working in all browsers? And how many of them are actually necessary for creating a really nice looking webpage? How many of them are worth of spending time with the complicated code many of them create (CSS gave use the possibility to use really nice styling simply and a way for changing the style of the whole site by editing one file – but what are people using it for? Pull down menus, tabs and other tricks that not only break up with several browsers supporting CSS but may break the usability of the whole site with browsers without CSS support)?

    No, this is not clever. I understand from a hackers point of view that these are interesting and certainly have been great fun for someone to implement, but often hackers (including myself) do stuff that should be done because, and only because it’s possible, not because it would actually be usefull.

  150. 150

    Nice and useful article

  151. 151

    Amazing collection, definetly a great web resource ! Keep up the great work!

  152. 152

    Thanks I love seeing our web service show up on Programmable Web. Ever since we decided to launch the web service publicly, I’ve been

  153. 153

    Thanks to all the developers for sharing these css tips and tricks.

  154. 154

    Thanks for the sweet collections of Css Scripts

  155. 155

    Thanks for very interesting article. Can I translate your article into itali and publish at my webblog? I will back here and check your answer.Beautiful I have long been waiting to get something like this on my hands

  156. 156

    Really good hints to nice css techniques, i wish i have found them before i have designed my site…

  157. 157

    I’ve tried Dmitri’s xpath solution some years ago, from what I remember it was noticeable problems with perfomance
    I’m curious why document.matchAll() returns a StaticNodeList instead of an array of

  158. 158

    Thanks for the post! I somehow missed this and wouldn’t have known without your post. I heard about it on boagworld.com’s podcast but I’ve been following your work since the late ’90’s.
    Thanks for all your hardwork and your recent book. It’s been a great addition to my library!

  159. 159

    Thanks for putting together a great collection of really neat techniques.

  160. 160

    Great list. Really love some of the points there.

  161. 161

    All true and to get links from valued sites in your neighborhood you need great content and link bait such as free tools, advice, etc. However having sang from this hymn book for a long time its very frustrating to see “linked in” “technornati” ‘wikipedia” etc etc showing up in the top results for many searches. What are Google doing. Now what is going to happen everybody is going to start tagging like crazy. Basically they keep devaluing links to sites and replacing them wiht the next craze instead of doign what they tell the rest of us to do which is grow your links in a truly organic way.

  162. 162

    Great and useful reading, i have found some new and definitely will add them to the arsenal.

    Some links does not work anymore.

  163. 163

    Great, great list. I will definetely have use for it. My websites look crap :)

  164. 164

    very good job,excellent resource for a lot of people

  165. 165

    Great Compilation!

  166. 166

    Great article. A good resource for many. I have used some of the examples and they have simply enhanced the overall feel of my site.

    Thank you again for this great collection

  167. 167

    Excellent tips!

  168. 168

    Thanks for very interesting Article.

  169. 169

    Thank you for your summary!!
    I was really surprised at current CSS technics!

  170. 170

    Thank you for your summary!!
    I was really surprised at current CSS technics!

  171. 171

    keep up the your great work.
    thank you.

  172. 172

    This is a great collection of CSS-related links. Thank you!

  173. 173

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

  174. 174

    Thanks so much for this list, some of these are amazing and have really helped, me thanks once again Smashing Magazine!

  175. 175

    What an amazing compilation, with preview images too! Incredible.
    I like that…

  176. 176

    Thanks so much for this list, some of these are amazing and have really helped, me thanks once again Smashing Magazine!

  177. 177

    In addition to #15: there’s a tool that can automatically generate those floating divs: The Box Office ;)

  178. 178

    This is a great collection of CSS-related links. Thank you!

  179. 179

    Hey, thank you very much now im ready to pimp my own site up :P

  180. 180

    thanks good jop CSS style i thing will be new generation

  181. 181

    Indeed, a NICE list. I think it will be usefull in our projects

  182. 182

    very very nice listing man . :) I have tried first 2 menus . really nice . THANKS .

  183. 183

    I was searching for some beginner intro into CSS and I found this article. Thanks.

  184. 184

    got to your blog using ccs tutorial, very nice resource.

  185. 185

    CSS is important. And it is being used more and more often.
    the design of the whole site and support many function does CSS unchallengeable master for developer internet pages. I regrettably not wit to use CSS and on 50%. Hope that due to you I shall be able to perfect this situation thank you

  186. 186

    Hi. I found very useful and incredible all the information of this page but i found a problem i insert the code but when i click in the navigation bar i insert it gives me error WHY????????

  187. 187

    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.

  188. 188


    I think also so! I must learn CSS now! :)

  189. 189

    What a great site with all these wonderful blog templates

  190. 190

    Awesome. Thanks.
    Best regards.

  191. 191

    Excellent. Nice to have a comprehensive list in one place.

  192. 192

    Thanks for stuff.I was looking at the material over a large amount of time

  193. 193

    I love the block hover effect. Thanks so much for posting this.

  194. 194

    Nicolaas van den broek

    October 25, 2007 6:24 pm

    I love u long time

    (this is just damn fantastic)

  195. 195

    Well, as I understand it, that makes the HTTP_REFERER approach pretty useless – a pirate isn’t going to send that, so the result will be the same as a firewall blocking that info. It’s really a shame, because otherwise this seemed to be the most elegant approach to this headache!

  196. 196

    I do understand what you mean, Nicolas

  197. 197

    It will help us a lot, when we need some particular CSS technique.

    Thank you

  198. 198

    I love the block hover effect. Thanks so much for posting this.

  199. 199

    Thanks to all developers who contributed to accessible and usable css-based design over the last few years.

  200. 200

    Now being a webmaster what I can say about this incredible css help. Just amazing help..!

  201. 201

    Thanks so much for putting up this together.
    It saves so much time. The best useful tips in once place!

  202. 202

    Thanks for compiling this awesome list, some of these goodies are gonna be in my site pretty soon!

  203. 203

    Great compilation of CSS essentials. It does helps a lot to learn the awesome things CSS can do. CSS does beautify the web. It is like icing on a cake. CSS makes website design sweet. Thank you for providing us such valueable information about CSS.

  204. 204

    CSS is simple solutioon for your web, especially if you are going to hide any errors i the layout design :)

  205. 205

    Wow, fantastic post and really good for me as I am redesigning my site to a portfolio site :) thanx for the great tips!

  206. 206

    Now being a webmaster what I can say about this incredible css help. Just amazing help…

  207. 207

    I thought you would find this useful http://www.cssbuttons.net

  208. 208

    Smashing list, indeed! Also thanks for all people who added their gems!

  209. 209

    Woow! Great Thanks Happy Merry Cristhmas Day.

  210. 210

    Felipe Cavalcante

    December 24, 2007 9:37 pm

    Great compilation! Thanks for share it!
    I suggest to add “pagination” to thist list.

  211. 211

    These CSS articels are great, there is so much you can do with CSS other than just text size and fonts. Great article

  212. 212

    I love the block hover effect. Thanks so much for posting this.
    I will bookmark this page.


  213. 213

    Awesome job, learning CSS techniques helps you keep your site looking fresh and new.

  214. 214

    I also want to download some of CSS code

  215. 215

    Granted, it’s my own dumb fault for following a link to obvious Digg-bait, but as much as this list has a FEW good links, #26 sticks with me as the worst. Have we gone so far down the CSS rabbit hole that we’re forgetting about HTML TABLE elements? Semantic styling dictates that you use the elements that are best suited for the job, and in my opinion, a table is the best way to deliver… a table. You’re doing the Web a disservice when you go outside those lines for general concepts such as this.

  216. 216

    Awesome list. This is will come in real handy. Let’s not brag about the list being not incomplete. Everyone should keep a list of some sort of their own. The point of the post is to present the techniques that are important and handy.
    If you feel like there are stuff missing in the list, just share it in your comment.

  217. 217

    Great Info ……

  218. 218

    woooh!! i found what i need…thanks a lot.

  219. 219

    It does helps a lot to learn the awesome things CSS can do. CSS does beautify the web. It is like icing on a cake. CSS makes website design sweet. Thank you for providing us such valueable information about CSS.

  220. 220

    Thank you for sharing such a nice tips!

  221. 221

    Thank you, really good job!

  222. 222

    Thanks for share, Great.I think think its a great work thanl

  223. 223

    Naseer Ahmad Mughal

    February 4, 2008 7:04 am

    Hi there,

    I have seen these all and found very very helpful for my development in this direction …. (handling layout with CSS).

    I simply say, WELL DONE, and many thanks

    Best Regards,
    naseer ahmad mughal

  224. 224

    A good Collection dude………..

  225. 225

    . CSS does beautify the web. It is like icing on a cake

  226. 226

    Awesome collections dude. Thanks for sharing Gr8 Tips & Tricks. This is very useful for webdesigners.

  227. 227

    I stumbled upon this post, and it’s great! Tx

  228. 228

    I don’t care if you guys already have 287 comments on this article – I’m going to leave one more. What an awesome article and thanks for putting all of this together in one place. Adding this to my bookmarks right now!

  229. 229

    Thank you

  230. 230

    fabulous collectiong !!! …keep it on fellow..

  231. 231

    That is absolutely awesome!!! Thanks a LOT!!!

  232. 232

    Thank you, you’re the best. I love this website

  233. 233

    Thank you very much for this awesome post! All of these CSS techniques are very cool and I’m sure they will be useful for every web designer.

  234. 234

    I never thought css could do so much stuff. In fact from what I can see above, a lot of the behaviours in ajax can be replicated in css!

  235. 235

    Although this list is now more than one year old: It’s still interesting and there are still new things to find / explore. Thank you!

  236. 236

    Jobst von Heintze

    March 5, 2008 2:51 am

    Great list – thank you!

  237. 237

    Thank you so much for this list.
    Very useful.

  238. 238

    Reayly great blog.

  239. 239

    Really nice article on CSS tips… i am already using couple of them..!!

  240. 240

    I may point to a method that helps judging these techniques [1]. Some are in fact quite good, others might be “worth reconsideration”.

    [1] Great CSS Techniques

  241. 241

    This website is a great example of web space.

  242. 242

    The tips are nice, especially the ones for rounded corners. Is there a tutorial that allows CSS to apply rounded corners directly to images? I’ve seen one on the Internet, but it requires Javascript and I would rather avoid that since I’m new to web design.

  243. 243

    Thanks for such useful post!

  244. 244

    Printing Web-Documents and CSS it’s good

  245. 245

    Very nice :) btw very good tips i will use them.

  246. 246

    Thanks, this is a very helpful reference. Allow me to disagree on the importance of some of these techniques:

    4. Bar graphs are two-dimensional representations of one-dimensional data. A bar is a line with added but content-empty thickness. A table with labels and numbers is more precise and allows for easier comparison than a bar graph.
    5. Collapsing tables must be avoided. Tables are not tools, they represent information. Either the data is important and you show it, or it is not important and you don’t show it.
    45. Pie-charts make themselves more important than they are. Representing one-dimensional data in a two-dimensional model doesn’t make the data two-dimensional. Use a table with labels and numbers instead.

  247. 247

    Looking for suggestions on how to present a site makeover to new users. We have a well established site (300k user sessions a month) who I feel might be lost as our new design is significantly different than the current.

  248. 248

    I really dont understand, why some people still dont use CSS, but tables. CSS is easier, much more powerfull and much better looking… And your post is another proof :)

  249. 249

    Wow! Great list! Cool collection – I’m gonna grab me some CSS – Tahnkssssss!!!!!!!!!!!!!!!!!!!!

  250. 250


  251. 251

    I am about to embark on a CSS learning curve of excellence thanks to this list!

  252. 252

    Great and excellent article it’s realy helpful. Thanks again.

  253. 253

    Tons of resources here. Thanks!!

  254. 254

    Thx a lot for another great resource. I am again surprised how much benefit a webdesigner can get out ouf your magazine.

  255. 255

    sachin khobragade

    May 30, 2008 3:51 am

    it’s really a great stuff !

  256. 256

    Pattern Crochet

    June 3, 2008 12:48 am

    Thanks for very interesting article. I really enjoyed reading all of your articles. Keep up the good work. See You

  257. 257

    wow ! … i think i will have to brush up my skills … thnx

  258. 258

    very useful tricks! Thank you! but in CSS I prefer to use as little pics as design can.

  259. 259

    cool techniques . Keep up the good work.

  260. 260

    This list is orgasmic. Bookmarking in every single social bookmarking service I have an account with. I cannot afford to lose this!!

  261. 261

    Good TEchniques!

  262. 262

    Great list, but I’d like to see some better examples of some table-based forms as well. Not everyone wants to spend 3 weeks styling a “pure” css form with multiple columns.

  263. 263

    Tilemahos Manolatos

    July 23, 2008 6:37 am

    excellent collection!

  264. 264

    I Will use this in my website.

  265. 265

    great source!

  266. 266

    Great work! the 300+ responses says it all!

    I will be back for more….

    Thank you.

  267. 267

    You definitely put a lot of work into collecting a bunch of tutorials. There is a ridiculous amount of “wow” commenting here and at the risk of getting lost in the mix I really have to stress that everyone starts moving towards some web standards and check out the jQuery library.

  268. 268

    Great list… i’ll bookmark your site… thanks

  269. 269

    it ‘s powerfull!
    Thank you so much!

  270. 270

    thank you so much 2!aa

  271. 271

    Considering alot of these use and NEED Javascript, i wouldn’t call them CSS Techniques… CSS is just handy to manipulate via JS but these are not a OUT of the Box working tricks of pure CSS, they just plain need JS to work, but still handy to have that option.

  272. 272

    Thank You

  273. 273

    really is tremendous work in css i was so excitted to learn css really
    really really really thanks…

  274. 274


    mega list :)

    juz wiem co bede siekal przez kilka dni :D

  275. 275

    Thanks so much

  276. 276

    Wonderful !

  277. 277

    Wow what a fantastic inventory, you’ll be saving me a shed load of time, much appreciated!

  278. 278

    wow !!
    great !!
    thank U !!
    gogo~book mark~
    ——–in korean
    와우 !!
    북마크 고고씽~

  279. 279

    really awesome work……. a good collection of work. i have made use of lot of technique given here to create my personal page with admiring styles. thanks to all the persons behind this collection……

  280. 280

    Excellent collection of CSS. Its helps me a lot in knowing more about CSS. I hope for more collections in future.
    In the end, Great Job!!!!!

  281. 281

    Great list! Very interesting things.

    Thank you very much for this great work!!!

  282. 282

    Excellent list, very helpful for me. Many CSS techniques were unknown for me and will surely help me on some future projects! :)

  283. 283

    Gr8 work indeed..
    Cool CSS tricks & Nice techniques…. right here!!!

    అదిరింది గురూ!
    (in telugu)

  284. 284

    its great work……………
    can i have a code of this?????
    its really excellent…….. great!!!!!!!!!!!

  285. 285

    really very helpful tutorial

  286. 286

    Its very great work.
    can i have a code of this samples?????

  287. 287

    great collection, thanks…

  288. 288


  289. 289

    I’m the #1000 comment!

  290. 290

    really fantastic….and usefull…thanks for this

  291. 291


  292. 292

    This very wonderful tutorial.

  293. 293


  294. 294

    Awesome list! I didn’t even know you could do some of this stuff with CSS!

  295. 295

    Finally a useful article with useful information!! Thanks :-)

  296. 296

    That’s wat i’m talking about , Smashing , Just one word
    Thanks , we need alot of this cool posts

  297. 297

    Finally, someone who puts all the knowledge in one place.
    i My self am a web designer for some time now (Since 1999) and i wanted to launch a page like that for CSS a long time ago, but i became lazy.
    Thumbs up, really good job, just keep it posted.

  298. 298
  299. 299

    Really great.Thanks a lot. We needed them so much.

  300. 300

    Thank you!! Great list to keep as a reference.

  301. 301

    great lists ! got some new tricks even .. thanks for sharing …

  302. 302

    Excellent list..

  303. 303

    strony internetowe wrocław

    March 4, 2009 8:26 am

    Great list to keep as a reference.

  304. 304

    Still a great list! Where’s the “even more CSS techniques” :)

  305. 305


    very nice and useful list. thx

  306. 306

    strony internetowe

    April 21, 2009 7:50 am

    nice tutorial :)

  307. 307

    Great !! Thanks !

  308. 308

    gracias ^^

  309. 309

    Great Article …….. Thanks a lot

  310. 310

    thank you! this is exactly what i needed!

  311. 311

    lot of thanks for these usefull informations!!!

  312. 312

    love this! nice compilation… really helpful… thanks so much… :)

  313. 313

    That’s cool!

  314. 314

    Great compilation of CSS Tecnhiques

  315. 315

    really nice techniques

  316. 316

    Great list, very helpful, thanks a lot!

  317. 317

    it’s just great collection of CSS , Wonderfull i was not knowing many of thsi tecniques can u provides sources for all


  318. 318

    The 19th technique (CSS Image Preloader) dont work and will not work. If you repeat an antribute in CSS, it will every time take just the last one…

  319. 319

    The link to number 37 is: http://www.barenakedapp.com/the-design/displaying-percentages. Check it out and leave your thanks on the thread.

  320. 320

    Nice list, looks like the one i’m using :-) good post

  321. 321

    Great list! Lots of useful info here.

  322. 322

    I likes to farts while traveling 40 mph.

  323. 323

    Hi, nice post, very usefull!

    There are some links are broken, or dont exists anymore:
    I don’t look to everyone, but these are some of them:

    – 12. How to Create a Block Hover… Correct link is: http://www.smileycat.com/miaow/archives/000230.php
    – 29. CSS-Submit Buttons: http://www.ukthoughts.co.uk/journal/css-submit-buttons

  324. 324

    tanx for techniques…these are very useful to me…:D

  325. 325

    tanx for techniques…these are very useful to me…:D

  326. 326

    Great list. tons of thanks

  327. 327

    this is more like a joke

    December 24, 2009 10:53 am

    hi mate,

    Great effort to put up an article. Your doing it not well at all. Some of the sample u showed, need javaxcript to run. So this should be call css and javascript techniques.

  328. 328

    This is a great list. Can you add “sticky footer” to this list?

  329. 329

    Wow, thas very wonderful, i trying to learn css, that example, will help me.

  330. 330

    What can I say about this great work !!! … superb … absolutely superb

  331. 331

    This are great techniques . Keep up the good work. & thanks for sharing

  332. 332


  333. 333

    Nice links very useful for designers. please inform to me any new updates are added.

  334. 334

    I will use some of this tips on my site atestatinfo.ro

  335. 335

    Nice collection.
    Useful for designers.

  336. 336

    number 37 subject “Displaying Percentages with CSS” I could not understand it :(

  337. 337

    wow.. amazing, thanks a lot

  338. 338

    very very very very veryyyyyyyyyyyyyyyyy thanks

  339. 339

    Simply amazing and awesome!

  340. 340

    Thx a lot for another great resource. I am again surprised how much benefit a webdesigner can get out ouf your magazine.

  341. 341


  342. 342

    mantrla srinivas yadhav

    July 2, 2010 2:58 am

    hi technical guides yours new tips and new creative designs are very good and excellent css optimizing tips.

  343. 343

    good one… great

  344. 344

    useful resource. I bookmarked it

  345. 345

    very nice collection, i add some others recently i´ve posted on my website if you want a deep study check it out, its on spanish btw

  346. 346

    Awesome list here. Some really useful stuff. I would recommend anyone wanting to learn CSS go down the line and try these tutorials. Thanks for collecting them!

  347. 347

    The link on number 8 is flagged as a reported attack page in Firefox.

  348. 348

    You have written a very informative post about logo design tips. I came across your blog while searching via google.com . I have bookmarked your site and sent the link to some of my colleagues are will also find that useful.

  349. 349

    I have gone through the list and that’s really a great list. I will save this link for future reference.

  350. 350

    This is really one of many improved content connected with those that I have please read on this kind of matter nowadays. Great do the job.

  351. 351

    nice tips, I enjoyed completely. post something more on css 3.0 also.
    Thanks a lot,
    from ADMEC Multimedia Mentors

  352. 352

    These are perfect! I nwo have so many new ideas.

  353. 353

    Great CSS techniques! THX

  354. 354

    For # 25. (CSS-Based Forms: Techniques) I think it looks amazing… so simple yet stylish and proffestional. The other articles are amazing too. Keep up the good work!

  355. 355

    Great Excellent CSS techniques, Thanks a lot for improve my CSS Knowledge… Keep it up and add something more I am waiting for new….

  356. 356

    Keep it up, your writing is consistently a pleasure to read that I perhaps told my friends. Just enjoying this!

  357. 357

    man and van this is great for me i didnt know few thisnk mentioned here thanks

  358. 358

    Thanks for these css tips. Was looking for a batch list like this well done.

  359. 359

    I want to use same like( “50. StyleMap: CSS+HTML Visual Sitemap”). but here I cant find specified link. its showing Page is not available. so could you please help me to get that simmillar page. Thanks in advenace. 50. StyleMap: CSS+HTML Visual Sitemap

  360. 360


  361. 361

    very nice collection

  362. 362

    Simply Great Article


  363. 363

    tahnks for share

  364. 364

    any thing new related to image rounded corners.

  365. 365

    Hi its vary good. i would also like to share one basic css website http://cssproperty.com

  366. 366

    Hi there, outstanding site. Is extremely good design. I recently got done with cosmetic classes and would like to start-up my site. I appreciate you for the good write-up!

  367. 367

    wonderful info for me…

  368. 368

    Any news about A defector’s mystical disappearance?

  369. 369

    Good post, Love it. Keep it up. I appreciate it.

  370. 370

    You have pretty nice blog here. Not bad keep it up. I will mention about this in my own blog. All the best

  371. 371

    This is a very useful reference – thanks for sharing

  372. 372

    Nice tips buddy!

  373. 373

    these are very useful techniques. thank you

  374. 374

    Excellent, I have learned more.

↑ Back to top