Dynamic Drive CSS Library- Uber Round Color Tabs

CSS Library

Hosting Discounts

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

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/24/2008

Revision History: None

Usage Terms: Click here