This is my first tutorial and the subject is rollover image tabs using only CSS. This is the method i use for my sites navigation here.

There will be a few steps covered but i will try to explain it as simple as i can

Step 1 – The Image

First we need to open Photoshop or the graphics program of your choice and create an image 110px x 80px. This is to be the only image we will use for our navigation. Notice how I have both of the buttons (normal state & hover state) in the one image.

Step 2 – The XHTML

Now its time to fire up your coding program, In my case it is Dreamweaver. Create a new html document and name it navbar.html then save the file.

(more…)