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.

Advertising
  1. 1

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

    1
  2. 352

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

    1
  3. 703

    Great CSS techniques! THX

    0
  4. 1054

    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!
    prestonracette.com/

    1
  5. 1405

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

    0
  6. 1756

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

    1
  7. 2107

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

    0
  8. 2458

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

    0
  9. 2809

    Hi,
    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

    0
  10. 3160

    INTERESANTE APORTE

    0
  11. 3511

    very nice collection

    0
  12. 3862

    Simply Great Article

    Thanks

    0
  13. 4213

    tahnks for share

    0
  14. 4564

    any thing new related to image rounded corners.

    0
  15. 4915

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

    0
  16. 5266

    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!

    0
  17. 5617

    wonderful info for me…

    0
  18. 5968

    Any news about A defector’s mystical disappearance?

    0
  19. 6319

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

    0
  20. 6670

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

    -1
  21. 7021

    This is a very useful reference – thanks for sharing

    -1
  22. 7372

    Nice tips buddy!

    1
  23. 7723

    these are very useful techniques. thank you

    0
  24. 8074

    Excellent, I have learned more.

    0

↑ Back to top