Menu Search
Jump to the content X X
The Smashing Book #5

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. new Smashing Book 5 features smart responsive design techniques and 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 Buttons28

CSS-Technique29

22. CSS Map Pop30

CSS-Technique31

23. PHP-based CSS Style Switcher32

CSS-Technique33

24. CSS Unordered List Calender34 (CSS Styled Calender35)

CSS-Technique36

27. Printing Web-Documents and CSS37

CSS-Technique38

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

CSS-Technique40

29. CSS-Submit Buttons
CSS-Technique

30. CSS Teaser Box41

CSS-Technique42

31. CSS Tricks for Custom Bullets43

CSS-Technique44

32. Ticked Off Links Reloaded45

CSS-Technique46

33. CSS Zooming47

CSS-Technique48

34. Creating a Star Rater using CSS49

CSS-Technique50

35. The ways to style visited Links51

CSS-Technique52

36. PDF, ZIP, DOC Links Labeling53

CSS-Technique54

38. Image Floats without the Text Wrap55

CSS-Technique56

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

CSS-Technique58

40. Simple accessible external links59

CSS-Technique60

41. Zebra Table with JavaScript and CSS61

CSS-Technique62

42. Vertical Centering with CSS63 (Horizontal and Vertical Centering with CSS64

CSS-Technique65

45. Dynamic Piechart with CSS66

CSS-Technique67

46. Format Footnotes with CSS68

CSS-Technique69

48. Snook’s Resizable Underlines70

CSS-Technique71

49. Switchy McLayout: An Adaptive Layout Technique72

CSS-Technique73

50. StyleMap: CSS+HTML Visual Sitemap74

CSS-Technique75

51. Custom Reading Width76

CSS-Technique77

52. CSS Alert Message78

CSS-Technique79

53. CSS Production Notes80

CSS-Technique81

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://www.ampsoft.net/webdesign-l/image-button.html
  29. 29 http://www.ampsoft.net/webdesign-l/image-button.html
  30. 30 http://mikecherim.com/experiments/css_map_pop.php
  31. 31 http://mikecherim.com/experiments/css_map_pop.php
  32. 32 http://mikecherim.com/gbcms_xml/news_page.php?id=12
  33. 33 http://mikecherim.com/gbcms_xml/news_page.php?id=12
  34. 34 http://mikecherim.com/gbcms_xml/news_page.php?id=0
  35. 35 http://veerle.duoh.com/blog/comments/a_css_styled_calendar/
  36. 36 http://mikecherim.com/gbcms_xml/news_page.php?id=0
  37. 37 http://css-discuss.incutio.com/?page=PrintStylesheets
  38. 38 http://css-discuss.incutio.com/?page=PrintStylesheets
  39. 39 http://www.alistapart.com/articles/improvingprint/
  40. 40 http://www.alistapart.com/articles/improvingprint/
  41. 41 http://www.456bereastreet.com/lab/teaser/
  42. 42 http://www.456bereastreet.com/lab/teaser/
  43. 43 http://www.macworld.com/2005/12/secrets/januarycreate/index.php
  44. 44 http://www.macworld.com/2005/12/secrets/januarycreate/index.php
  45. 45 http://www.colly.com/index.php?/weblog/comments/ticked_off_links_reloaded
  46. 46 http://www.colly.com/index.php?/weblog/comments/ticked_off_links_reloaded
  47. 47 http://www.deltatangobravo.com/images/zoom/
  48. 48 http://www.deltatangobravo.com/images/zoom/
  49. 49 http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/
  50. 50 http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/
  51. 51 http://webdesign.maratz.com/lab/visited_links_styling/
  52. 52 http://webdesign.maratz.com/lab/visited_links_styling/
  53. 53 http://webdesign.maratz.com/lab/pdf_links_labeling/
  54. 54 http://webdesign.maratz.com/lab/pdf_links_labeling/
  55. 55 http://ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/
  56. 56 http://ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/
  57. 57 http://webdesign.maratz.com/lab/new_window_link/
  58. 58 http://webdesign.maratz.com/lab/new_window_link/
  59. 59 http://www.maxdesign.com.au/presentation/external/
  60. 60 http://www.maxdesign.com.au/presentation/external/
  61. 61 http://24ways.org/2005/splintered-striper
  62. 62 http://24ways.org/2005/splintered-striper
  63. 63 http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
  64. 64 http://www.456bereastreet.com/lab/centered/both/
  65. 65 http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
  66. 66 http://petewilliamsagency.com/css/examples/pie/
  67. 67 http://petewilliamsagency.com/css/examples/pie/
  68. 68 http://www.brandspankingnew.net/archive/2005/07/format_footnote.html
  69. 69 http://www.brandspankingnew.net/archive/2005/07/format_footnote.html
  70. 70 http://www.colly.com/index.php?/weblog/comments/snooks_resizable_underlines/
  71. 71 http://www.colly.com/index.php?/weblog/comments/snooks_resizable_underlines/
  72. 72 http://www.alistapart.com/articles/switchymclayout
  73. 73 http://www.alistapart.com/articles/switchymclayout
  74. 74 http://www.scottjehl.com/v7/index.php/process/stylemap_visual_sitemap/
  75. 75 http://www.scottjehl.com/v7/index.php/process/stylemap_visual_sitemap/
  76. 76 http://www.devlounge.net/articles/custom-reading-width-beta
  77. 77 http://www.devlounge.net/articles/custom-reading-width-beta
  78. 78 http://www.bioneural.net/2006/04/01/create-a-valid-css-alert-message/
  79. 79 http://www.bioneural.net/2006/04/01/create-a-valid-css-alert-message/
  80. 80 http://24ways.org/2006/css-production-notes
  81. 81 http://24ways.org/2006/css-production-notes
SmashingConf Oxford

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 Oxford, on March 15—16, 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

    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

    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

    very cool

    0

↑ Back to top