53 CSS-Techniques You Couldn’t Live Without

Advertisement

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

CSS-Technique3

2. Navigation Matrix Reloaded4

CSS-Technique5

3. CSS Tabs6

CSS-Technique7

4. CSS For Bar Graphs8

CSS-Technique9

5. Collapsing Tables: An Example10

CSS-Technique11

6. Adam’s Radio & Checkbox Customisation Method12

CSS-Technique13

7. CSS Image Replacement14

CSS-Technique15

8. CSS Shadows (CSS Shadows Roundup16)

CSS-Technique

9. CSS Rounded Corners Roundup17 (Nifty Corners18)

CSS-Technique19

10. Drop Cap – Capital Letters with CSS

CSS-Technique

11. Define Image Opacity with CSS

CSS-Technique

12. How to Create a Block Hover Effect for a List of Links20

CSS-Technique21

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

CSS-Technique24

14.CSS Diagrams

CSS-Technique

15. CSS Curves25

CSS-Technique26

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.

CSS-Technique28

17. CSS Image Map29

CSS-Technique30

18. CSS Image Pop-Up31

CSS-Technique32

19. CSS Image Preloader33


CSS-Technique
34

20. CSS Image Replacement for Buttons35

CSS-Technique36

21. Link Thumbnail37

CSS-Technique38

22. CSS Map Pop39

CSS-Technique40

23. PHP-based CSS Style Switcher41

CSS-Technique42

24. CSS Unordered List Calender43 (CSS Styled Calender44)

CSS-Technique45

25. CSS-Based Forms: Techniques46

CSS-Technique47

26. CSS-Based Tables: Techniques48

CSS-Technique49

27. Printing Web-Documents and CSS50

CSS-Technique51

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

CSS-Technique53

29. CSS-Submit Buttons
CSS-Technique

30. CSS Teaser Box54

CSS-Technique55

31. CSS Tricks for Custom Bullets56

CSS-Technique57

32. Ticked Off Links Reloaded58

CSS-Technique59

33. CSS Zooming60

CSS-Technique61

34. Creating a Star Rater using CSS62

CSS-Technique63

35. The ways to style visited Links64

CSS-Technique65

36. PDF, ZIP, DOC Links Labeling66

CSS-Technique67

37. Displaying Percentages with CSS68


CSS-Technique
69

38. Image Floats without the Text Wrap70

CSS-Technique71

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

CSS-Technique73

40. Simple accessible external links74

CSS-Technique75

41. Zebra Table with JavaScript and CSS76

CSS-Technique77

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

CSS-Technique80

43. Unobtrusive Sidenotes81

CSS-Technique82

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

CSS-Technique85

45. Dynamic Piechart with CSS86

CSS-Technique87

46. Format Footnotes with CSS88

CSS-Technique89

47. Hierarchical Sitemap with CSS90

CSS-Technique91

48. Snook’s Resizable Underlines92

CSS-Technique93

49. Switchy McLayout: An Adaptive Layout Technique94

CSS-Technique95

50. StyleMap: CSS+HTML Visual Sitemap96

CSS-Technique97

51. Custom Reading Width98

CSS-Technique99

52. CSS Alert Message100

CSS-Technique101

53. CSS Production Notes102

CSS-Technique103

Footnotes

  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 top Tweet itShare on Facebook

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.

Advertisement
  1. 1

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

    0
  2. 2

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

    0
  3. 3

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

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

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

    0
  6. 6

    Awesome. Great Compilation.

    0
  7. 7

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

    0
  8. 8

    wonderful resource for webmasters, thank you the webmaster :)

    0
  9. 9

    just great
    thx!

    0
  10. 10

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

    0
  11. 11

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

    0
  12. 12

    great list, thanks for sharing!

    0
  13. 13

    Very cool, and useful, list.
    Thank you!

    0
  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?

    0
  15. 15

    Great!!

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

    0
  16. 16

    Very, very good list!

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

    Thank you again ;)

    0
  17. 17

    Great collection!

    Thanks alot…

    0
  18. 18

    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

    0
  19. 19

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

    0
  20. 20

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

    1
  21. 21

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

    0
  22. 22

    Great list! #25 is a broken link.

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

    0
  24. 24

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

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

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

    r.

    0
  27. 27

    An excellent collection of links.

    Thanks!

    0
  28. 28

    Jesper Rønn-Jensen

    January 20, 2007 3:41 am

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

    0
  29. 29

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

    0
  30. 30

    very cool

    0
  31. 31

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

    0
  32. 32

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

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

    0
  34. 34

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

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

    Tim

    0
  36. 36

    Awesome help!
    Thanks!

    0
  37. 37

    Christ, is your headline big enough?

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

    0
  39. 39

    awesome.
    totally awesome.

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

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

    0
  41. 41

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

    0
  42. 42

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

    0
  43. 43

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

    0
  44. 44

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

    0
  45. 45

    Wow!! Great list!

    0
  46. 46

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

    0
  47. 47

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

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

    Cheers.

    0
  49. 49

    nice collection here … thanks a lot …

    0
  50. 50

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

    0

↑ Back to top