Home > Web dev > 53 CSS-Techniques You Couldn’t Live Without

53 CSS-Techniques You Couldn’t Live Without

October 12th, 2009

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.

1. CSS Based Navigation

ec719e2a3563118d0bad09333652d790 53 CSS Techniques You Couldn’t Live Without

2. Navigation Matrix Reloaded

dab631f9eb3bd8c1599d9f1fe7e4f634 53 CSS Techniques You Couldn’t Live Without

3. CSS Tabs

7c5f2cfa6b88d71b389c8225e0b347ca 53 CSS Techniques You Couldn’t Live Without

4. CSS Bar Graphs (CSS For Bar Graphs)

7b44d662a142aca3897e284327c11a2a 53 CSS Techniques You Couldn’t Live Without

5. Collapsing Tables: An Example

d930595402813491d45a720aaad890d5 53 CSS Techniques You Couldn’t Live Without

6. Adam’s Radio & Checkbox Customisation Method

c2aec6d7209b3b60ad7a0f5b50cc0381 53 CSS Techniques You Couldn’t Live Without

7. CSS Image Replacement

b17c87e4d3bdf13eee638e22bb3a3ffb 53 CSS Techniques You Couldn’t Live Without

8. CSS Shadows (CSS Shadows Roundup)

67a8989a25b93390ce7a1f6165943ee9 53 CSS Techniques You Couldn’t Live Without

9. CSS Rounded Corners Roundup (Nifty Corners)

e374f2ac6e1a1dfa1c1ab806f4d5501b 53 CSS Techniques You Couldn’t Live Without

10. Drop Cap – Capital Letters with CSS

a7358955da01680c34452959e25f9f76 53 CSS Techniques You Couldn’t Live Without

11. Define Image Opacity with CSS

f6d40d880f42c5ef2f326ed393359474 53 CSS Techniques You Couldn’t Live Without

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

b01ac74c26557b2819f7f9f8378ba67b 53 CSS Techniques You Couldn’t Live Without

13. Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS

f36b86b1a3c2e6de9beb20b1a4669d59 53 CSS Techniques You Couldn’t Live Without

14. CSS Diagrams

72686ccfc5e30202f6446d95f9c0b500 53 CSS Techniques You Couldn’t Live Without

15. CSS Curves

2b78754a5bdcee6b51391d390c63c650 53 CSS Techniques You Couldn’t Live Without

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.

f0840b5e0786e3dbead1e4ab6b21379f 53 CSS Techniques You Couldn’t Live Without

17. CSS Image Map

6685675dbab3594b874d934d488385cb 53 CSS Techniques You Couldn’t Live Without

18. CSS Image Pop-Up

6cd63a2e3f8053d7334cf2ddbf68dc5f 53 CSS Techniques You Couldn’t Live Without

19. CSS Image Preloader

9ca2c5f81f3e97dc29a05e33d17aa647 53 CSS Techniques You Couldn’t Live Without

20. CSS Image Replacement for Buttons

9c9f71f9fa2267f407e92ea040d82359 53 CSS Techniques You Couldn’t Live Without

21. Link Thumbnail

62cd27e899edc6d87a4fbdae11d60fba 53 CSS Techniques You Couldn’t Live Without

22. CSS Map Pop

22155010f358eeed1e05a23200f33c96 53 CSS Techniques You Couldn’t Live Without

23. PHP-based CSS Style Switcher

470c5a7c9d05f4afc0975b3bdba615d7 53 CSS Techniques You Couldn’t Live Without

24. CSS Unordered List Calender (CSS Styled Calender)

de79d81594af10ce23c65905bdbc3498 53 CSS Techniques You Couldn’t Live Without

25. CSS-Based Forms: Techniques

a9ea2a51575befe49971ceb4caac7e8c 53 CSS Techniques You Couldn’t Live Without

26. CSS-Based Tables: Techniques

d1961af64d713f0ea5400265009da6e0 53 CSS Techniques You Couldn’t Live Without

27. Printing Web-Documents and CSS

4d7e882c88753b22c25a0912f7d5245d 53 CSS Techniques You Couldn’t Live Without

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

b0c9ac07005ec131b98af828d71c0d98 53 CSS Techniques You Couldn’t Live Without

29. CSS-Submit Buttons

f474f09cee8a801d0be5963ef26a5832 53 CSS Techniques You Couldn’t Live Without

30. CSS Teaser Box

204040b16f9cd8fb54c69ab6063e028b 53 CSS Techniques You Couldn’t Live Without

31. CSS Tricks for Custom Bullets

ab4cadce659dbe10121ba1ecc1969cdd 53 CSS Techniques You Couldn’t Live Without

32. Ticked Off Links Reloaded

e4781403446b958ae48294da9dca9903 53 CSS Techniques You Couldn’t Live Without

33. CSS Zooming

935984b652319be227d27830b6ce461e 53 CSS Techniques You Couldn’t Live Without

34. Creating a Star Rater using CSS

50a26bd3587a01e19955ac1a30c7c8d7 53 CSS Techniques You Couldn’t Live Without

35. The ways to style visited Links

da3e15222f4d232047409317732a6291 53 CSS Techniques You Couldn’t Live Without

36. PDF, ZIP, DOC Links Labeling

ed80440de2e018ee7e4c09837c444c2c 53 CSS Techniques You Couldn’t Live Without

37. Displaying Percentages with CSS

d59cb51c97f7432092560600ddb2398a 53 CSS Techniques You Couldn’t Live Without

38. Image Floats without the Text Wrap

fe756183a82d0c89cb2d3949f0e6178d 53 CSS Techniques You Couldn’t Live Without

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

e17665fc246c475857205512c658a365 53 CSS Techniques You Couldn’t Live Without

40. Simple accessible external links

6e6ddea9047072e35677c37b737a85f2 53 CSS Techniques You Couldn’t Live Without

41. Zebra Table with JavaScript and CSS

156b90a27426aa2bba8ace8ee07fb232 53 CSS Techniques You Couldn’t Live Without

42. Vertical Centering with CSS (Horizontal and Vertical Centering with CSS

625f98abf7bb24b7a7eec90eb3a44d6e 53 CSS Techniques You Couldn’t Live Without

43. Unobtrusive Sidenotes

eca40686852ad5306aee19801cfb7ccd 53 CSS Techniques You Couldn’t Live Without

44. Image Caption with CSS (Styled Images with Caption)

26dd5936f9b308d0dee2960011c9dc38 53 CSS Techniques You Couldn’t Live Without

45. Dynamic Piechart with CSS

1e0f9f65ed4dc6a6ade0722aa0f45847 53 CSS Techniques You Couldn’t Live Without

46. Format Footnotes with CSS

4952e5a95f5fb3aa00977057b563282e 53 CSS Techniques You Couldn’t Live Without

47. Hierarchical Sitemap with CSS

7bae3bf4bdb240a6c70df15cccac6438 53 CSS Techniques You Couldn’t Live Without

48. Snook’s Resizable Underlines

8a48412a46f17050243de7f71643dc67 53 CSS Techniques You Couldn’t Live Without

49. Switchy McLayout: An Adaptive Layout Technique

0dd4d0cd0de144e3d9b92c7134c1751b 53 CSS Techniques You Couldn’t Live Without

50. StyleMap: CSS+HTML Visual Sitemap

afe9ec462b84176c750af897b1d6576d 53 CSS Techniques You Couldn’t Live Without

51. Custom Reading Width

822afd95b3cbba66ff0677cdc9c55374 53 CSS Techniques You Couldn’t Live Without

52. CSS Alert Message

89cb5f8984fe76d9599525b0b92ad38e 53 CSS Techniques You Couldn’t Live Without

53. CSS Production Notes

601f1d09829be994bd090ba1a607301d 53 CSS Techniques You Couldn’t Live Without

Possibly related posts: (automatically generated)

share save 171 16 53 CSS Techniques You Couldn’t Live Without

Web dev Tags:, , , ,

Related posts » Top jQuery plugins and tutorials in 2011
» 50 Awesome Animations using CSS3
» 25 Useful Html5 Cheat Sheets and Tutorials For Web Developer
» 7 Best Mobile Web HTML5 Framework For Mobile App Development
» 10 Common Useful PHP Regular Expression
  • http://gwzo.sitepedia.jp/?p=2662 links for 2009-10-14 | Gzone

    [...] 53 CSS-Techniques You Couldn’t Live Without | 9Tricks.Com – Tips – Tricks – Tuto… (tags: css tutorials) [...]

  • http://realurl.org/twitted.php?id=4886210376 Twitted by kennyfeed

    [...] This post was Twitted by kennyfeed [...]

  • http://joseluizcoe.com/home/2009/10/16/links-for-2009-10-15.htm links for 2009-10-15 | joseluizcoe.com – website (im)pessoal de José Luiz Coe, também conhecido como Zeck

    [...] 53 CSS-Techniques You Couldn’t Live Without | 9Tricks.Com – Tips – Tricks – Tutorials (tags: css tutorial webdesign) [...]

  • http://www.webinventif.fr/51-liens-wordpress-jquery-css-design/ 51 liens sur Wordpress, jQuery, CSS, design …

    [...] 53 CSS-Techniques You Couldn’t Live Without 53 techniques CSS intéressantes [...]