Smashing Magazine

53 CSS-Techniques You Couldn’t Live Without

• By Vitaly Friedman
• January 19th, 2007
• CSSTechniques
• 374 Comments

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 Coding¹.

1. CSS Based Navigation²

³

2. Navigation Matrix Reloaded⁴

⁵

3. CSS Tabs⁶

⁷

4. CSS For Bar Graphs⁸

⁹

5. Collapsing Tables: An Example¹⁰

¹¹

7. CSS Image Replacement¹²

¹³

8. CSS Shadows (CSS Shadows Roundup¹⁴)

9. CSS Rounded Corners Roundup¹⁵ (Nifty Corners¹⁶)

¹⁷

10. Drop Cap – Capital Letters with CSS

11. Define Image Opacity with CSS

12. How to Create a Block Hover Effect for a List of Links¹⁸

¹⁹

14.CSS Diagrams

15. CSS Curves²⁰

²¹

16. Footer Stick²² 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.

²³

17. CSS Image Map²⁴

²⁵

19. CSS Image Preloader²⁶

²⁷

20. CSS Image Replacement for Buttons²⁸

²⁹

22. CSS Map Pop³⁰

³¹

23. PHP-based CSS Style Switcher³²

³³

24. CSS Unordered List Calender³⁴ (CSS Styled Calender³⁵)

³⁶

27. Printing Web-Documents and CSS³⁷

³⁸

28. Improved Links-Display for Print-Layouts with CSS³⁹

⁴⁰

29. CSS-Submit Buttons

30. CSS Teaser Box⁴¹

⁴²

31. CSS Tricks for Custom Bullets⁴³

⁴⁴

32. Ticked Off Links Reloaded⁴⁵

⁴⁶

33. CSS Zooming⁴⁷

⁴⁸

34. Creating a Star Rater using CSS⁴⁹

⁵⁰

35. The ways to style visited Links⁵¹

⁵²

36. PDF, ZIP, DOC Links Labeling⁵³

⁵⁴

38. Image Floats without the Text Wrap⁵⁵

⁵⁶

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

⁵⁸

40. Simple accessible external links⁵⁹

⁶⁰

41. Zebra Table with JavaScript and CSS⁶¹

⁶²

42. Vertical Centering with CSS⁶³ (Horizontal and Vertical Centering with CSS⁶⁴

⁶⁵

45. Dynamic Piechart with CSS⁶⁶

⁶⁷

46. Format Footnotes with CSS⁶⁸

⁶⁹

48. Snook’s Resizable Underlines⁷⁰

⁷¹

49. Switchy McLayout: An Adaptive Layout Technique⁷²

⁷³

50. StyleMap: CSS+HTML Visual Sitemap⁷⁴

⁷⁵

51. Custom Reading Width⁷⁶

⁷⁷

52. CSS Alert Message⁷⁸

⁷⁹

53. CSS Production Notes⁸⁰

⁸¹

Footnotes Link

1. 1 http://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

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 yourself? For example, Smashing Book 5, packed with smart responsive design patterns and techniques.

↑ Back to top Tweet itShare on Facebook