My favourite 5 CSS techniques

CSS is probably one of the most versatile and most easy thing to be engrossed into. During the development of Orangified, I came across thousands of such CSS hacks and properties, but the following 5 simply rocked me down...

Here I put them forward....

1. Cross-Browser CSS Gradient

The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browsers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image.
This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome.

Cross-Browser CSS Gradient

2. Sexy CSS Buttons

These buttons employ gradients, for which we use -webkit-gradient and -moz-linear-gradient. Secondly, we use border-radius and -moz-border-radius to make the button round.

For a bit of added depth and eye candy, this one has a subtle drop black drop shadow above the text using text-shadow and around the whole button using -webkit-box-shadow, -moz-box-shadow, and box-shadow.

Sexy CSS Buttons

3. CSS Transparency

One of the trickiest things to control, in a CSS-driven design, is the transparency of the interaction between foreground and background content.Below is a list of the best examples of the differing transparency approaches possible with CSS.

• Partial Opacity- Placing text over an image can sometimes make it difficult to read, but with Stu Nicholls’s methods the background for the text is made ‘opaque’ using various methods of opacity (including css3) and the black text is then quite readable.
  

  ---

• Cross-Browser Variable Opacity with PNG- How to overcome flaky browser support for PNG so you can take advantage of this graphic format’s lossless compression, alpha transparency, and variable opacity.
• Two Techniques for CSS Transparency

4. CSS BAR GRAPHS

BASIC CSS BAR GRAPH

This is a simple bar graph we developed for a tool we’re releasing shortly for our client. The concept is simple, utilize the percentage width abilities of CSS to accurately portray a percentage bar graph.

COMPLEX CSS BAR GRAPH

This is a more complex visualization, yet still following the same basic idea. Here the graph is a ‘bad’ to ‘good’ indicator with a marker that travels the length of the color scheme. A lighter bar shade also helps indicate the marker position as it travels from left to right.

VERTICAL CSS BAR GRAPH

CSS graphs

5. Rounded Corners - with fixed widths

There are so many ways to make rounded corners. Most eiter use extra markup, JavaScript to produce extra markup, or not wideley new CSS properties.

If you are using fixed widths, then you really don't need all that JUNK!

There are so many ways to make rounded corners. Most eiter use extra markup, JavaScript to produce extra markup, or not wideley new CSS properties.

If you are using fixed widths, then you really don't need all that JUNK!