Using CSS3 to create 'fading' hover states

This will create a subtle fade from one colour to another of a hover state (for navigation for example) - rather than a straight 'swap' of colours.

The four lines starting with “-webkit-transition” are saying to animate the colour for 0.2 seconds when it changes via css for webkit browsers, Mozilla browsers, Opera and CSS3 standard compliant browsers. You can also animate background colour, opacity and a few other elements. At the moment you can see this effect in Chrome and Safari, but as browsers get better they should all see it.

.RadMenu_SlideHorizontal .link {
color: #999;
-webkit-transition: color 0.2s ease-in;
-moz-transition: color 0.2s ease-in;
-o-transition: color 0.2s ease-in;
transition: color 0.2s ease-in;
}
.RadMenu_SlideHorizontal .link:hover {
color: #fff;
}

Multi-coloured links for Secondary Navigation

To do this, I used the following CSS which surprisingly works in all browsers except IE6.

• #cLS .NavBlock span.navitem1 a sets the default background image (this will be seen for all nav items in IE6 as well as the 4th, 5th etc nav items if they existed)
• #cLS .NavBlock span.navitem1:first-child a sets the background image for the first nav item
• #cLS .NavBlock span.navitem1:first-child + span a sets the background image for the second nav item
• #cLS .NavBlock span.navitem1:first-child + span + span a sets the background image for the third nav item
• You just keep adding + span to set styles for the 4th, 5th items etc

#cLS .NavBlock span.navitem1 a {
Background-image: url(_images/left-nav-bg-red.png);
}

/* 1st navigation item... */
#cLS .NavBlock span.navitem1:first-child a {
background-image: url(_images/left-nav-bg-orange.png);
}

/* 2nd navigation item... */
#cLS .NavBlock span.navitem1:first-child + span a {
background-image: url(_images/left-nav-bg-light-green.png);
}

/* 3rd navigation item... */
#cLS .NavBlock span.navitem1:first-child + span + span a {
background-image: url(_images/left-nav-bg-dark-green.png);
}