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

↑ Back to top Tweet itShare on Facebook