53 CSS-Techniques You Couldn’t Live Without January 19th, 2007
<script type=text/javascript> </script>
<script type=text/javascript> digg_url = 'http://digg.com/design/53_CSS_Techniques_You_Couldn_t_Live_Without'; </script>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, actualy, 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. Thanks to all developers who contributed to accessible and usable css-based design over the last few years. We really appreciate it. Thanks! 1. CSS Based Navigation 2. Navigation Matrix Reloaded 3. CSS Tabs 4. CSS Bar Graphs (CSS For Bar Graphs) 5. Collapsing Tables: An Example 6. Adam’s Radio & Checkbox Customisation Method 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 13. Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS 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 18. CSS Image Pop-Up 19. CSS Image Preloader 20. CSS Image Replacement for Buttons 21. Link Thumbnail 22. CSS Map Pop 23. PHP-based CSS Style Switcher 24. CSS Unordered List Calender (CSS Styled Calender) 25. CSS-Based Forms: Techniques 26. CSS-Based Tables: Techniques 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 37. Displaying Percentages with CSS 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 43. Unobtrusive Sidenotes 44. Image Caption with CSS (Styled Images with Caption) 45. Dynamic Piechart with CSS 46. Format Footnotes with CSS 47. Hierarchical Sitemap 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 Posted by Smashing Magazine Filed in CSS Tags: css, design, techniques, web-development