Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

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.





Two images used (resized for easier download):

The CSS:


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.

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
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.
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.
Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.