Dynamic Drive CSS Library- Uber Round Color Tabs

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Uber Round Color Tabs

Author: Dynamic Drive

Uber Round Color Tabs is a solid colored CSS menu with tabs that are well rounded on each side. Thanks to two transparent gifs used to create the corners, the tabs can be customized to any desired color using CSS color values alone. Now that's just handy! Also see DD Color Tabs and DD Color Tabs II.

Demo:

Two images used (resized for easier download):

The CSS:

<style type="text/css">

.ubercolortabs{
padding: 0;
width: 100%;
overflow: hidden;
background: transparent;
}

.ubercolortabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin: 0;
padding: 0;
list-style: none;
}

.ubercolortabs li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform: uppercase;
}


.ubercolortabs a{
float: left;
color: white;
background: #804000 url(media/roundleft.gif) no-repeat left top; /*default background color of tabs, left corner image*/
margin: 0 2px 0 0;
padding: 0 0 1px 3px;
text-decoration: none;
letter-spacing: 1px;
}

.ubercolortabs a span{
float: left;
display: block;
background: transparent url(media/roundright.gif) no-repeat right top; /*right corner image*/
padding: 7px 9px 3px 6px;
cursor: pointer;
}

.ubercolortabs a span{
float: none;
}


.ubercolortabs a:hover, .ubercolortabs li.selected a{
background-color: #AE5300; /*background color of tabs onMouseover*/
color: white;
}

.ubercolortabs a:hover span{
background-color: transparent;
}


.ubercolordivider{ /*CSS for horizontal line.*/
clear: both;
padding: 0;
width: 100%;
height: 5px;
line-height: 5px;
background: #804000; /*background color of horizontal line*/
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}

</style>

The HTML:

<div class="ubercolortabs">
<ul>
<li><a href="http://www.dynamicdrive.com" style="margin-left: 12px"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm"><span>New</span></a></li>
<li class="selected"><a href="http://www.dynamicdrive.com/revised.htm"><span>Revised</span></a></li>
<li><a href="http://tools.dynamicdrive.com"><span>Tools</span></a></li>	
<li><a href="http://www.dynamicdrive.com/forums/"><span>Forums</span></a></li>	
</ul>
</div>

<div class="ubercolordivider"> </div>

Code Info

Rate this code:

Date Posted: 10/23/2008

Revision History: None

Usage Terms: Click here

Your Comments (19)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 2 pages 1 2 >

Interesting variation on the sliding doors principle. Clever because it's simple.
However, I think you do not really need the extra <span>. You can put one bg image on the <li> and the other on the <a>

Still an interesting idea. When you throw in semi-transparent PNG images in stead of the gifs things can become even more interesting.

Thanks

Posted by Rob Hofker on 10/28, 03:48 AM

Try creating one gif instead of two to create a sprite. That's one less request the browser has to make.

Posted by Garrick Cheung on 10/29, 02:57 AM

hope

Posted by moda on 10/29, 06:45 AM

هااااااااااااااااااااااااااااااااااااى

Posted by ahmed on 10/30, 02:55 PM

I have used web designs like this one several times and it really works. http://www.artdigitalonline.com

Posted by aalmeida71 on 11/10, 10:36 AM

hi i am new user for css pls there's have the code but there no image so how can i make like that menus

Posted by Anush on 12/03, 06:22 AM

when i click on perticular tab it should automatically change color (how to do that...?)

right now its not happening in this script what code should i need to add??

Posted by vra on 12/11, 09:22 AM

tell me how to use hover

Posted by how to use hover on 12/19, 11:56 PM

when i click on perticular tab it should automatically change color (how to do that...?)

Posted by satyam on 01/09, 01:32 AM

can any one tell me when i click on perticular tab it should automatically change color (how to do that...?)as soon as the corresponding page is viewing.
but that's not happenign in this code...
help me...

Posted by satyam on 01/09, 01:34 AM

Comment Pages 1 of 2 pages 1 2 >

Commenting is not available in this weblog entry.