Adding glow can make things look special or stand out and it can be applied to lots of different things. Glow can be used in website designs, to make something look just a little more special than the average look. In this case I’m going to use glow and apply it to a navigation bar to make look a little bit more ‘Wow’ than the average navigation bar, using nicely coloured gradients and bit of CSS magic, I’m going to show you how to achieve a real nice navigation effect, which looks smooth, sleek and with a few little extras to make it stand out.

First off all we’re going to need a couple of images for the effect which are below:

The Body Background:

(The actual size of the image is 3 x 3, but because that is very small the image has been scaled so you can actually see it. You don’t actually need this image, but the navigation bar looks quite good with this background, so I thought I’d include it)

Navigation Background:

(The background of the whole bar of the navigation)

Navigation Current Tab Selected:

(The background of the current navigation tab that the person is on, this is explained later on in the tutorial)

Navigation Under glow effect:

(The glow effect which appears under the navigation bar)

Just download those images by right clicking and choose save image as. Hold onto them because we’re going to need them in a little while. For now though lets form the XHTML for our navigation bar:

Notice that are two random classes in the CSS, that aren’t in the HTML code above. But now oit’s time to add them in!

The current class is applied to a anchor tag like so:

<a href="#" class="current">Link 1</a>

What does it do? When the class current is applied to whatever anchor tag it uses the current tab selected image, which slightly differs in colour to the navigation background. The whole idea of me putting in this was, say if you have a navigation bar with four links, Home, About, Contact and More and someone was on the About page and you wanted to make the navigation tab that they are on a different colour signifying they are on that page, applying the current class to the whichever anchor tag would create this effect. So you apply the current class to whichever tab is the About page link, something like this:

It’s up to you how you use the current class, just a little extra effect to make things a little bit different.

The Under Navigation glow effect

The glow effect is simply a reversed gradient colour of the actual navigation background and has most of it’s background blurred away. The blur is important as it gives the fade effect, using a normal opaque eraser wouldn’t get the clean effect. To add it in, we simply take our HTML:

Notice in the CSS there is another called underNav. This is where it gets applied, the class simply defines the width and heigh of the under nav image. The width is set to 100% which is important, because the width setting will mean the under nav glow effect will scale to the size of the actual navigation bar. Any other width applied will mean the under nav and the actual navigation will not be the same length. The height also needs to be applied, so the glow effect fade is visible. So after all of that let’s put it all together: