I've got a tabbed navigation bar where I'd like the open tab to have a shadow to set it apart from the other tabs. I'd also like the whole tab section to have a single shadow (see bottom horizontal line) going up, shading the bottom of all tabs except for the open one.
I'm going to use CSS3's box-shadow
property to do it, but I can't figure out a way to shade only the parts I want.
Normally I'd cover up the bottom shadow of the open tab with the content area (higher z-index
), but in this case the content area itself has a shadow so that would just wind up covering the tab.
_______ _______ _______ | | | | | | ____|_______|__| |__|_______|______
Shadow would go up from the horizontal lines, and outward of the vertical lines.
_______ | | _______________| |_________________
Here is a live example:
Any help out there, geniuses?
In your sample create a div inside #content with this style
#content_over_shadow {
padding: 1em;
position: relative; /* look at this */
background:#fff; /* a solid background (non transparent) */
}
and change #content style (remove paddings) and add shadow
#content {
font-size: 1.8em;
box-shadow: 0 0 8px 2px #888; /* line shadow */
}
add shadows to tabs:
#nav li a {
margin-left: 20px;
padding: .7em .5em .5em .5em;
font-size: 1.3em;
color: #FFF;
display: inline-block;
text-transform: uppercase;
position: relative;
box-shadow: 0 0 8px 2px #888; /* the shadow */
}