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).

  • Ryan

    I just want to unleash an army of robots..

    I’ ll look into these when i get home, looks promising!

  • Pooja

    I like this css techniques. very good information for web developers.
    Thank a lot sharing this information with us.

  • CSS-Design

    “Realistic Looking Button with CSS3″ -> very nice idea, but the code isn’t really semntic, right?

    I would prefer the “Sexy CSS Buttons”-Solution!

  • bigjobsboard

    Wow. these are great! I wonder if these will fit my site. LOL. Thanks a lot!

  • Pingback: 5 Refreshing CSS Techniques | Lively Design Tuts

  • Boni

    Looks great, Most of the buttons looks like mac button, i think.. hehe.

  • brez

    Can’t wait until CSS3 gets implemented in all the major browsers.

  • Pingback: 5 Refreshing CSS Techniques | Design Reviver - css

  • Jared

    CSS3 and HTML5 need to hurry and get here. They are functional and solve some big problems on the web. I don’t want to wait until 2014 or later…

  • clea walford

    thanks a lot for the useful information!

  • AH Web Art

    I like these techniques….! Lot of changes occurs in CSS series and are the best.


    tank you.. useful post!!