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 Barcelona, dedicated to smart front-end techniques and design patterns.

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

CSS-Technique

5. Collapsing Tables: An Example

CSS-Technique

7. CSS Image Replacement8

CSS-Technique9

8. CSS Shadows (CSS Shadows Roundup10)

CSS-Technique

9. CSS Rounded Corners Roundup11 (Nifty Corners12)

CSS-Technique13

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 Links14

CSS-Technique15

14.CSS Diagrams

CSS-Technique

15. CSS Curves16

CSS-Technique17

16. Footer Stick18 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-Technique19

17. CSS Image Map20

CSS-Technique21

19. CSS Image Preloader22


CSS-Technique
23

20. CSS Image Replacement for Buttons

CSS-Technique

22. CSS Map Pop24

CSS-Technique25

23. PHP-based CSS Style Switcher26

CSS-Technique27

24. CSS Unordered List Calender28 (CSS Styled Calender29)

CSS-Technique30

27. Printing Web-Documents and CSS31

CSS-Technique32

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

CSS-Technique34

29. CSS-Submit Buttons
CSS-Technique

30. CSS Teaser Box35

CSS-Technique36

31. CSS Tricks for Custom Bullets37

CSS-Technique38

32. Ticked Off Links Reloaded39

CSS-Technique40

33. CSS Zooming41

CSS-Technique42

34. Creating a Star Rater using CSS43

CSS-Technique44

35. The ways to style visited Links45

CSS-Technique46

36. PDF, ZIP, DOC Links Labeling47

CSS-Technique48

38. Image Floats without the Text Wrap49

CSS-Technique50

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

CSS-Technique52

40. Simple accessible external links53

CSS-Technique54

41. Zebra Table with JavaScript and CSS55

CSS-Technique56

42. Vertical Centering with CSS57 (Horizontal and Vertical Centering with CSS58

CSS-Technique59

45. Dynamic Piechart with CSS60

CSS-Technique61

46. Format Footnotes with CSS62

CSS-Technique63

48. Snook’s Resizable Underlines64

CSS-Technique65

49. Switchy McLayout: An Adaptive Layout Technique66

CSS-Technique67

50. StyleMap: CSS+HTML Visual Sitemap

CSS-Technique

51. Custom Reading Width68

CSS-Technique69

52. CSS Alert Message70

CSS-Technique71

53. CSS Production Notes72

CSS-Technique73

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

  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.

    2
  20. 20

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

    -1

↑ Back to top