53 CSS-Techniques You Couldn’t Live Without



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.


You might want to take a look at the article Powerful CSS-Techniques For Effective Coding.


1. CSS Based Navigation


CSS-Technique


2. Navigation Matrix Reloaded


CSS-Technique


3. CSS Tabs


CSS-Technique


4. CSS Bar Graphs (CSS For Bar Graphs)


CSS-Technique


5. Collapsing Tables: An Example


CSS-Technique


6. Adam’s Radio & Checkbox Customisation Method


CSS-Technique


7. CSS Image Replacement


CSS-Technique


8. CSS Shadows (CSS Shadows Roundup)


CSS-Technique


9. CSS Rounded Corners Roundup (Nifty Corners)


CSS-Technique


10. Drop Cap - Capital Letters with CSS


CSS-Technique


11. Define Image Opacity with CSS


CSS-Technique


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


CSS-Technique


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


CSS-Technique


14. CSS Diagrams


CSS-Technique


15. CSS Curves


CSS-Technique


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.


CSS-Technique


17. CSS Image Map


CSS-Technique


18. CSS Image Pop-Up


CSS-Technique


19. CSS Image Preloader


CSS-Technique


20. CSS Image Replacement for Buttons


CSS-Technique


21. Link Thumbnail


CSS-Technique


22. CSS Map Pop


CSS-Technique


23. PHP-based CSS Style Switcher


CSS-Technique


24. CSS Unordered List Calender (CSS Styled Calender)


CSS-Technique


25. CSS-Based Forms: Techniques


CSS-Technique


26. CSS-Based Tables: Techniques


CSS-Technique


27. Printing Web-Documents and CSS


CSS-Technique


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


CSS-Technique


29. CSS-Submit Buttons


CSS-Technique


30. CSS Teaser Box


CSS-Technique


31. CSS Tricks for Custom Bullets


CSS-Technique


32. Ticked Off Links Reloaded


CSS-Technique


33. CSS Zooming


CSS-Technique


34. Creating a Star Rater using CSS


CSS-Technique


35. The ways to style visited Links


CSS-Technique


36. PDF, ZIP, DOC Links Labeling


CSS-Technique


37. Displaying Percentages with CSS


CSS-Technique


38. Image Floats without the Text Wrap


CSS-Technique


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


CSS-Technique


40. Simple accessible external links


CSS-Technique


41. Zebra Table with JavaScript and CSS


CSS-Technique


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


CSS-Technique


43. Unobtrusive Sidenotes


CSS-Technique


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


CSS-Technique


45. Dynamic Piechart with CSS


CSS-Technique


46. Format Footnotes with CSS


CSS-Technique


47. Hierarchical Sitemap with CSS


CSS-Technique


48. Snook’s Resizable Underlines


CSS-Technique


49. Switchy McLayout: An Adaptive Layout Technique


CSS-Technique


50. StyleMap: CSS+HTML Visual Sitemap


CSS-Technique


51. Custom Reading Width


CSS-Technique


52. CSS Alert Message


CSS-Technique


53. CSS Production Notes


CSS-Technique




0 comments: