Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

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: Dec 2015.

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

7. CSS Image Replacement12

CSS-Technique13

8. CSS Shadows (CSS Shadows Roundup14)

CSS-Technique

9. CSS Rounded Corners Roundup15 (Nifty Corners16)

CSS-Technique17

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 Links18

CSS-Technique19

14.CSS Diagrams

CSS-Technique

15. CSS Curves20

CSS-Technique21

16. Footer Stick22 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-Technique23

17. CSS Image Map24

CSS-Technique25

19. CSS Image Preloader26


CSS-Technique
27

20. CSS Image Replacement for Buttons

CSS-Technique

22. CSS Map Pop28

CSS-Technique29

23. PHP-based CSS Style Switcher30

CSS-Technique31

24. CSS Unordered List Calender32 (CSS Styled Calender33)

CSS-Technique34

27. Printing Web-Documents and CSS35

CSS-Technique36

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

CSS-Technique38

29. CSS-Submit Buttons
CSS-Technique

30. CSS Teaser Box39

CSS-Technique40

31. CSS Tricks for Custom Bullets41

CSS-Technique42

32. Ticked Off Links Reloaded43

CSS-Technique44

33. CSS Zooming45

CSS-Technique46

34. Creating a Star Rater using CSS47

CSS-Technique48

35. The ways to style visited Links49

CSS-Technique50

36. PDF, ZIP, DOC Links Labeling51

CSS-Technique52

38. Image Floats without the Text Wrap53

CSS-Technique54

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

CSS-Technique56

40. Simple accessible external links57

CSS-Technique58

41. Zebra Table with JavaScript and CSS59

CSS-Technique60

42. Vertical Centering with CSS61 (Horizontal and Vertical Centering with CSS62

CSS-Technique63

45. Dynamic Piechart with CSS64

CSS-Technique65

46. Format Footnotes with CSS66

CSS-Technique67

48. Snook’s Resizable Underlines68

CSS-Technique69

49. Switchy McLayout: An Adaptive Layout Technique70

CSS-Technique71

50. StyleMap: CSS+HTML Visual Sitemap72

CSS-Technique73

51. Custom Reading Width74

CSS-Technique75

52. CSS Alert Message76

CSS-Technique77

53. CSS Production Notes78

CSS-Technique79

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2008/02/21/powerful-css-techniques-for-effective-coding/
  2. 2 /2015/09/mobile-navigation-for-smashing-magazine/
  3. 3 /2015/09/mobile-navigation-for-smashing-magazine/
  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.mezzoblue.com/tests/revised-image-replacement/
  13. 13 http://www.mezzoblue.com/tests/revised-image-replacement/
  14. 14 http://web-graphics.com/mtarchive/001589.php
  15. 15 http://www.smileycat.com/miaow/archives/000044.php#nojavascript
  16. 16 http://www.smileycat.com/miaow/archives/000044.php#nojavascript
  17. 17 http://www.smileycat.com/miaow/archives/000044.php#nojavascript
  18. 18 http://www.smileycat.com/miaow/archives/000230.php
  19. 19 http://www.smileycat.com/miaow/archives/000230.php
  20. 20 http://storage.couchfort.net/cssCurves/
  21. 21 http://storage.couchfort.net/cssCurves/
  22. 22 http://www.themaninblue.com/experiment/footerStickAlt/
  23. 23 http://www.themaninblue.com/experiment/footerStickAlt/
  24. 24 http://www.frankmanno.com/ideas/css-imagemap/
  25. 25 http://www.frankmanno.com/ideas/css-imagemap/
  26. 26 http://snipplr.com/view/2122/css-image-preloader/
  27. 27 http://snipplr.com/view/2122/css-image-preloader/
  28. 28 http://mikecherim.com/experiments/css_map_pop.php
  29. 29 http://mikecherim.com/experiments/css_map_pop.php
  30. 30 http://mikecherim.com/gbcms_xml/news_page.php?id=12
  31. 31 http://mikecherim.com/gbcms_xml/news_page.php?id=12
  32. 32 http://mikecherim.com/gbcms_xml/news_page.php?id=0
  33. 33 http://veerle.duoh.com/blog/comments/a_css_styled_calendar/
  34. 34 http://mikecherim.com/gbcms_xml/news_page.php?id=0
  35. 35 http://css-discuss.incutio.com/?page=PrintStylesheets
  36. 36 http://css-discuss.incutio.com/?page=PrintStylesheets
  37. 37 http://www.alistapart.com/articles/improvingprint/
  38. 38 http://www.alistapart.com/articles/improvingprint/
  39. 39 http://www.456bereastreet.com/lab/teaser/
  40. 40 http://www.456bereastreet.com/lab/teaser/
  41. 41 http://www.macworld.com/2005/12/secrets/januarycreate/index.php
  42. 42 http://www.macworld.com/2005/12/secrets/januarycreate/index.php
  43. 43 http://www.colly.com/index.php?/weblog/comments/ticked_off_links_reloaded
  44. 44 http://www.colly.com/index.php?/weblog/comments/ticked_off_links_reloaded
  45. 45 http://www.deltatangobravo.com/images/zoom/
  46. 46 http://www.deltatangobravo.com/images/zoom/
  47. 47 http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/
  48. 48 http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/
  49. 49 http://webdesign.maratz.com/lab/visited_links_styling/
  50. 50 http://webdesign.maratz.com/lab/visited_links_styling/
  51. 51 http://webdesign.maratz.com/lab/pdf_links_labeling/
  52. 52 http://webdesign.maratz.com/lab/pdf_links_labeling/
  53. 53 http://ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/
  54. 54 http://ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/
  55. 55 http://webdesign.maratz.com/lab/new_window_link/
  56. 56 http://webdesign.maratz.com/lab/new_window_link/
  57. 57 http://www.maxdesign.com.au/presentation/external/
  58. 58 http://www.maxdesign.com.au/presentation/external/
  59. 59 http://24ways.org/2005/splintered-striper
  60. 60 http://24ways.org/2005/splintered-striper
  61. 61 http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
  62. 62 http://www.456bereastreet.com/lab/centered/both/
  63. 63 http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
  64. 64 http://petewilliamsagency.com/css/examples/pie/
  65. 65 http://petewilliamsagency.com/css/examples/pie/
  66. 66 http://www.brandspankingnew.net/archive/2005/07/format_footnote.html
  67. 67 http://www.brandspankingnew.net/archive/2005/07/format_footnote.html
  68. 68 http://www.colly.com/index.php?/weblog/comments/snooks_resizable_underlines/
  69. 69 http://www.colly.com/index.php?/weblog/comments/snooks_resizable_underlines/
  70. 70 http://www.alistapart.com/articles/switchymclayout
  71. 71 http://www.alistapart.com/articles/switchymclayout
  72. 72 http://www.scottjehl.com/v7/index.php/process/stylemap_visual_sitemap/
  73. 73 http://www.scottjehl.com/v7/index.php/process/stylemap_visual_sitemap/
  74. 74 http://www.devlounge.net/articles/custom-reading-width-beta
  75. 75 http://www.devlounge.net/articles/custom-reading-width-beta
  76. 76 http://www.bioneural.net/2006/04/01/create-a-valid-css-alert-message/
  77. 77 http://www.bioneural.net/2006/04/01/create-a-valid-css-alert-message/
  78. 78 http://24ways.org/2006/css-production-notes
  79. 79 http://24ways.org/2006/css-production-notes
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ 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 UX, front-end and performance problems in large companies. Get in touch.

Advertisement
  1. 1

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

    0
  2. 2

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

    0
  3. 3

    Awesome. Great Compilation.

    0
  4. 4

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

    0
  5. 5

    wonderful resource for webmasters, thank you the webmaster :)

    0
  6. 6

    just great
    thx!

    0
  7. 7

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

    0
  8. 8

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

    0
  9. 9

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

    1
  10. 10

    great list, thanks for sharing!

    0
  11. 11

    Very cool, and useful, list.
    Thank you!

    0
  12. 12

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

    Great!!

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

    0
  14. 14

    Carlos Eduardo

    January 19, 2007 6:20 pm

    Very, very good list!

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

    Thank you again ;)

    0
  15. 15

    Great collection!

    Thanks alot…

    0
  16. 16

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

    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!

    -1
  18. 18

    volkan karakus

    January 19, 2007 9:01 pm

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

    0
  19. 19

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

    1
  20. 20

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

    0
  21. 21

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

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

    David G. Paul

    January 20, 2007 5:56 pm

    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

    Matthias Mauch

    January 21, 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.

    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

↑ Back to top