One of my new favourite tools is css3. I love how for the tech savvy I can add a level of detail and luxury to a web page with no fallback problems for lesser browsers.

One of my current favourites is color transitioning in css3 for such things as links.

If you give it a go i’m sure you’ll agree with me, that it rules.

It’s also really incredibly simple!

First of all we start with a regular href tag and a :hover state declaration.

a{  
   color:#000;  
}  
a:hover{color:#f00;} 

Then we add our css3 transition, first of all just for webkit browsers.

a{  
   color:#000;  
   -webkit-transition:color 1s ease-in;  
}  
a:hover{color:#f00;} 

Now we improve it by adding more extensive browser support.

a {  
   color:#000;  
   -webkit-transition:color 1s ease-in;  
   -moz-transition:color 1s ease-in;  
   -o-transition:color 1s ease-in;  
   transition:color 1s ease-in;  
}

And then you have it a simple transition from your main color to your hover state color. With no JS, jQuery or any other javascript libraries help.

Wicked, eh?