CSS3 comes with a range of transition, transformation and animation properties that you can use to enhance your website and introduce animation without using Flash or JavaScript. There are also some nice design enhancements like text-shadows and border-radius. In this tutorial I’ll demonstrate how to use these techniques to enhance a menu.

Buyer beware, the effects you are going to see are not going to be viewable by all users. Even if you have an update-to-date browser you still may not see all these effects. Here is a quick summary of the different properties and who can view them:

So why should I use the CSS3 properties if not everyone can see them? In this tutorial I am only going to use examples that degrade nicely. The idea being that the CSS3 effects will enhance the user experience but are not crucial for the page layout. For example, we can use CSS3 to make a nice fade-in background colour on hover. For those with incompatible browsers, the background colour will appear instantly rather than fade in.

Using Prefixes

You will notice in the table above that it mentions some browsers need prefixes. This means that you need to write the generic rule, eg border-radius:5px and then also the browser specific rule, eg -moz-border-radius:5px. In the examples below I will just use the generic rule. I recommend using CSS3 Generator to create your CSS with all the browser specific rules.

Our Sample menu – without CSS3

Just 4 links with the background changing colour on roll over.

CSS3 Border Radius

This adds rounded corners to an element. It can be an even radius on all 4 sides or different for each corner. In this example all sides are set to 10px radius.

Psuedo Code: border-radius: top-left top-right bottom-left bottom-right;
Sample CSS: border-radius: 5px 5px 5px 5px;

CSS3 Text-shadow

The text-shadow property adds a drop shadow to your text.

Psuedo Code: text-shadow: horizontal-length vertical-length blur-radius shadow-color;
Sample CSS: text-shadow: 1px 1px 2px #112d4a;

CSS3 Transition

The transition property changes from one style to another. In this example we use transition to fade in the background color on rollover. You can use this property to change any CSS property such as color, width, height etc.

Psuedo Code: transition: property duration ease-method;
Sample CSS: transition: background 0.5s ease;

CSS3 Transform (2D)

The transform property allows you to transform an element using the following methods: translate, roate, scale, skew and matrix. In this example I have rotated the links 45 degrees. (See w3schools for futher info on the other methods.)

Psuedo Code: transform: method(value);
Sample CSS: transform:rotate(45deg);

CSS3 Transform (3D)

This property is very limited in it’s use, so I wouldn’t recommend it until more widely available.

CSS3 Animation

The animation property allows you to use the @keyframes rule to change from style to style over a set of keyframes. In this example the nav bar will tween from margin-left:0px to margin-left:100px. (You may need to refresh the page to see).

Animation
Psuedo Code: animation:nameOfItem duration;
Sample CSS: animation:myAnim 10s;

@keyframes
Psuedo Code:
@keyframes nameOfItem {
from { css-property }	to { css-property }
}
Sample CSS:
@keyframes myAnim {
from {margin-left:0px;}	to {margin-left:100px;}
}