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

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