Wednesday, 17 March 2010

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-techniques0000 in 53 CSS-Techniques You Couldnt Live Without
2. Navigation Matrix Reloaded
Css-techniques0001 in 53 CSS-Techniques You Couldnt Live Without
3. CSS Tabs
Css-techniques0002 in 53 CSS-Techniques You Couldnt Live Without
4. CSS For Bar Graphs
Css-techniques0003 in 53 CSS-Techniques You Couldnt Live Without
5. Collapsing Tables: An Example
Css-techniques0004 in 53 CSS-Techniques You Couldnt Live Without
6. Adam’s Radio & Checkbox Customisation Method
Css-techniques0005 in 53 CSS-Techniques You Couldnt Live Without
7. CSS Image Replacement
Css-techniques0006 in 53 CSS-Techniques You Couldnt Live Without
8. CSS Shadows (CSS Shadows Roundup)
Css-techniques0007 in 53 CSS-Techniques You Couldnt Live Without
9. CSS Rounded Corners Roundup (Nifty Corners)
Css-techniques0008 in 53 CSS-Techniques You Couldnt Live Without
10. Drop Cap – Capital Letters with CSS
Css-techniques0009 in 53 CSS-Techniques You Couldnt Live Without
11. Define Image Opacity with CSS
Css-techniques0010 in 53 CSS-Techniques You Couldnt Live Without
12. How to Create a Block Hover Effect for a List of Links
Css-techniques0011 in 53 CSS-Techniques You Couldnt Live Without
13. Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS
Css-techniques0012 in 53 CSS-Techniques You Couldnt Live Without
14.CSS Diagrams
Css-techniques0013 in 53 CSS-Techniques You Couldnt Live Without
15. CSS Curves
Css-techniques0014 in 53 CSS-Techniques You Couldnt 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.
Css-techniques0015 in 53 CSS-Techniques You Couldnt Live Without
17. CSS Image Map
Css-techniques0016 in 53 CSS-Techniques You Couldnt Live Without
18. CSS Image Pop-Up
Css-techniques0017 in 53 CSS-Techniques You Couldnt Live Without
19. CSS Image Preloader

Css-techniques0018 in 53 CSS-Techniques You Couldnt Live Without

20. CSS Image Replacement for Buttons
Css-techniques0019 in 53 CSS-Techniques You Couldnt Live Without
21. Link Thumbnail
Css-techniques0020 in 53 CSS-Techniques You Couldnt Live Without
22. CSS Map Pop
Css-techniques0021 in 53 CSS-Techniques You Couldnt Live Without
23. PHP-based CSS Style Switcher
Css-techniques0022 in 53 CSS-Techniques You Couldnt Live Without
24. CSS Unordered List Calender (CSS Styled Calender)
Css-techniques0023 in 53 CSS-Techniques You Couldnt Live Without
25. CSS-Based Forms: Techniques
Css-techniques0024 in 53 CSS-Techniques You Couldnt Live Without
26. CSS-Based Tables: Techniques
Css-techniques0025 in 53 CSS-Techniques You Couldnt Live Without
27. Printing Web-Documents and CSS
Css-techniques0027 in 53 CSS-Techniques You Couldnt Live Without
28. Improved Links-Display for Print-Layouts with CSS
Css-techniques0026 in 53 CSS-Techniques You Couldnt Live Without
29. CSS-Submit Buttons
Css-techniques0028 in 53 CSS-Techniques You Couldnt Live Without
30. CSS Teaser Box
Css-techniques0029 in 53 CSS-Techniques You Couldnt Live Without
31. CSS Tricks for Custom Bullets
Css-techniques0030 in 53 CSS-Techniques You Couldnt Live Without
32. Ticked Off Links Reloaded
Css-techniques0031 in 53 CSS-Techniques You Couldnt Live Without
33. CSS Zooming
Css-techniques0032 in 53 CSS-Techniques You Couldnt Live Without
34. Creating a Star Rater using CSS
Css-techniques0033 in 53 CSS-Techniques You Couldnt Live Without
35. The ways to style visited Links
Css-techniques0034 in 53 CSS-Techniques You Couldnt Live Without
36. PDF, ZIP, DOC Links Labeling
Css-techniques0035 in 53 CSS-Techniques You Couldnt Live Without
37. Displaying Percentages with CSS

Css-techniques0036 in 53 CSS-Techniques You Couldnt Live Without

38. Image Floats without the Text Wrap
Css-techniques0037 in 53 CSS-Techniques You Couldnt Live Without
39. Let visitors decide, whether or not will they open link in a new window
Css-techniques0038 in 53 CSS-Techniques You Couldnt Live Without
40. Simple accessible external links
Css-techniques0039 in 53 CSS-Techniques You Couldnt Live Without
41. Zebra Table with JavaScript and CSS
Css-techniques0040 in 53 CSS-Techniques You Couldnt Live Without
42. Vertical Centering with CSS (Horizontal and Vertical Centering with CSS
Css-techniques0041 in 53 CSS-Techniques You Couldnt Live Without
43. Unobtrusive Sidenotes
Css-techniques0042 in 53 CSS-Techniques You Couldnt Live Without
44. Image Caption with CSS (Styled Images with Caption)
Css-techniques0043 in 53 CSS-Techniques You Couldnt Live Without
45. Dynamic Piechart with CSS
Css-techniques0044 in 53 CSS-Techniques You Couldnt Live Without
46. Format Footnotes with CSS
Css-techniques0045 in 53 CSS-Techniques You Couldnt Live Without
47. Hierarchical Sitemap with CSS
Css-techniques0046 in 53 CSS-Techniques You Couldnt Live Without
48. Snook’s Resizable Underlines
Css-techniques0047 in 53 CSS-Techniques You Couldnt Live Without
49. Switchy McLayout: An Adaptive Layout Technique
Css-techniques0048 in 53 CSS-Techniques You Couldnt Live Without
50. StyleMap: CSS+HTML Visual Sitemap
Css-techniques0049 in 53 CSS-Techniques You Couldnt Live Without
51. Custom Reading Width
Css-techniques0050 in 53 CSS-Techniques You Couldnt Live Without
52. CSS Alert Message
Css-techniques0051 in 53 CSS-Techniques You Couldnt Live Without
53. CSS Production Notes
Css-techniques0052 in 53 CSS-Techniques You Couldnt Live Without