30th September 2011

Using CSS3 Special Effects for Menus

Guides | Tutorial | Uncategorized By 5 years ago

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:

CSS3 PropertyWebkit Browsers
(Chrome & Safari)
FirefoxInternet Explorer
Border RadiusYes, with -webkit- prefixYes, with -moz- prefixIE9 only with -ms- prefix
Text-ShadowYesYesNot yet
TransitionsYes, with -webkit- prefixYes, with -moz- prefixNot yet
2D TransformationsYes, with -webkit- prefixYes, with -moz- prefixIE9 only with -ms- prefix
3D TransformationsYes, with -webkit- prefixNot yetNot yet
AnimationYes, with -webkit- prefixYes, with -moz- prefixNot yet

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 colour on rollover. You can use this property to change any CSS property such as colour, 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).

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

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

Cartoon about Browser Standards

Post by 5 years ago

In this week’s blog posts we have all focused how web standards effect our jobs. With all the new HTML5 & CSS3 features available now, browser standards have lead to increasing frustrations in implementing these

Got an idea?

We help entrepreneurs, organizations and established brands from around
the country bring ideas to life. We would love to hear from you!