DesignReviver

One of the great things about CSS is that you will never ever tire of all the new and refreshing ideas that you will find stumbling through the web design community. Everyday a developer somewhere has improved or perfected on a technique.

For today’s news round-up we feature five new CSS techniques, each different in its own way, and all very useful and insightful.

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

Snazzy Hover Effects Using CSS

With all these CSS3 effects and tutorials popping up every day that show all the new and wonderful things we can make happen, we sometimes forget about poor little old CSS2.1 and the great potential it still has. In this tutorial, they will be going over how to create flexible and advanced hover techniques using CSS2.1 properties.

Snazzy Hover Effects Using CSS

Pure CSS Vignette

For those of you who don’t know, a vignette effect is a discoloration on the edges of an image. The technique involves a few divs, a bit of simple CSS, and a whole lot of fun.

Pure CSS Vignette

Realistic Looking Button with CSS3

Realistic Looking Button with CSS3

Sexy CSS Buttons

These buttons employ a couple of useful CSS properties. Most importantly, 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, I have added 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

By Paul Andrew (Speckyboy and speckyboy@twitter).