CSS Tabs based menu systems are really improving instead of all the classic button based navigation. This small tutorial will help you create a image based liquid tab using CSS and xHTML.

Yes… there are lot other ways getting this done… but for those who are new, this could sure help.

We just tried representing this whole process in a 3D view… not sure if we have messed it up but sure you will understand as you go on below (don’t forget the DEMO).

We are just adding a SPAN tag into the standard xHTML based navigation + a few CSS Attributes to them.

The CSS:

ul li{

float:left;
padding:0 5px;
list-style:none;

}

ul li a{

background:url(/* LEFT IMAGE */) no-repeat left top;
height:45px;
display:block;
float:left;
padding-left:20px;
text-decoration:none;
color:#000;

}

ul li a span{

background:url(/* RIGHT IMAGE */) no-repeat right top;
display:block;
padding:15px 20px 0 0;
display:block;
height:30px;
float:left;

}

Hope you understood the concept behind this… If still NO, take a look at the Live Demo below:

Demo

Don’t forget to take a look at the Source Code of the Demo too… (Right-Click and View Source)

Adobe Illustrator is one of the most common known design software for vector work. We are never into Illustrator, but some how we were managed to convert each and every gradient into Illustrator manually.

We hope now there will some way or the other way to get these gradients into other vector based applications too.

If you feel this resource useful, please feel free the DIGG this article to support us….

• Loading the Swatches into Illustrator CS3

• Follow the above image and then choose the .ai file from the below download.

Download

This file has been downloaded 54166 times.