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

Shade Image Tabs Menu

Author: Dynamic Drive

This is an attractive "blue shading" image tab menu. The shade effect is created using two gradient background images, one for the overall tabs, and the other, for the currently "active" tab. Based partially on the Basic Tabs menu, Shade Image Tabs Menu supports three commonly requested features:

  • Ability to align the menu tabs "left", "center", or "right" on the page
  • Highlight a particular tab so it appears selected/ active,
  • Change the width of the tab menu (so the underline beneath it spans a length other than the entire width of the page.


The two images (resized for easier download):

The CSS:


Code Info

Rate this code:

Date Posted: 05/16/2006

Revision History: None

Usage Terms: Click here

Your Comments (80)

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 8 pages  1 2 3 >  Last »

very nice!
Posted by IAnagui on 05/20, 08:08 PM
Very clean. It does look like the on state is off by a pixel in IE though...
Posted by T. Orion on 05/22, 11:01 PM
I noticed the offset with the "on" state in IE, though couldn't find a easy fix. The problem is with the fact that the active tab has a position of relative, which throws off IE as far as the background image positioning is concerned.
Posted by ddadmin on 05/22, 11:28 PM
Love the setup!

Newby Question:

One problem - I can't get border-bottom to display so I don't have the horizontal rule as shown.

Posted by Kid Kool on 05/26, 03:02 PM
This is a great menu. It's very clean and looks amazing. By the way, the offset (if you're talking about the fact that the "on" tab is slightly lower than the others) is most likely supposed to be there.
Posted by Dan on 05/28, 11:44 AM
Clean and professional looking!
Posted by Nathan on 05/29, 10:03 AM
Very clean and minimalistic I love it great job you are a jedi of designers.
Posted by Jeff Jones on 06/29, 04:43 PM
It's great! after evaluating over 10-20 different tabs, it's my favorite!
However one feature i miss (or simply don;t know how to get around is: when the page is printed, I'd like to have all the tabs printed on the same page. I have setup css sheet for print, but nothing happens :( any ideas anyone?

tia! kris
Posted by kriskl on 06/30, 04:28 AM
great and thanks!
Posted by yahao on 07/07, 05:06 PM
really good :)
Posted by Custom Web Development on 07/08, 04:12 AM

Comment Pages 1 of 8 pages  1 2 3 >  Last »

Commenting is not available in this weblog entry.
Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.