Friday Next is no longer taking new clients or performing work for existing clients.

My Dilemma

I wanted to create a navigation bar in which the selected nav item ‘bleeds’ into the content area – making it quite clear which item is selected to the user.  Here is my original design:

Box-shadow Nav with all CSS & HTML - Friday Next Web Development

It looks easy enough, right?  Just export a few layers as graphics and insert them into the site.  Not so fast!  I wanted to accomplish this entirely with CSS.

With the release of the retina MacBook Pro, high-pixel-dense screens are going to become more popular very soon, and I don’t want to have to redo every site I’ve ever built to accommodate this.  I’d rather just build everything with proper CSS and let the browser do the Hi-DPI rendering.

Each of the nav ‘buttons’ received a box-shadow value.  My goal was to hide the box-shadow on the top, when the item was selected.

A Generic Situation

Let’s say we have 2 div elements: <div id=”1″> and <div id=”2″>.  If the z-index of #1 is higher than the z-index of #2, then everything inside of #1 will be shown above everything in #2.

Even if you give one of the inner div elements in the #2 a higher z-index than the #1, those inner divs will still show up below the #1 and everything in it.

I’m trying to explain how z-index works, but if you’re more of a visual learner, this site is where I figured this simple principle out.  Knock yourself out!

The Solution

When I first put the nav together, I started with this:

Box-shadow Nav with all CSS & HTML - Friday Next Web Development

Looks alright, but the selected item doesn’t completely ‘bleed’ into the content area above it.  The area above the buttons is a div called ‘tab-shadow’.  It has a bottom border of 2px.  Each side of ‘tab-shadow’ contains an absolutely positioned div with a percentage width and a CSS gradient applied.  Here’s the code:

HTML

CSS

.shortcode-tabs .tab-shadow {
		position: relative;
		background: #fff;
		z-index: 2;
		width: 60%;
		height: 5px;
		margin: 0 auto;
		border-bottom: 2px solid #ccc;
	}
	.tab-shadow-inner {
		width: 60%;
		height: 7px;
		background-color: #fff;
		position: relative;
		margin: -9px auto 0;
		z-index: 5;
	}
	.tab-shadow .left-grad {
		position: absolute;
		z-index: 3;
		width: 20%;
		height: 2px;
		left: 0;
		bottom: -2px;
		background-color: #444444;
		background-image: -webkit-gradient(linear, left top, right top, from(#ccc), to(#fff)); /* Saf4+, Chrome */
		background-image: -webkit-linear-gradient(left, #fff, #ccc); /* Chrome 10+, Saf5.1+, iOS 5+ */
		background-image:    -moz-linear-gradient(left, #fff, #ccc); /* Firefox 3.6-15 */
		background-image:      -o-linear-gradient(left, #fff, #ccc); /* Opera 11.10+ */
		background-image:         linear-gradient(to right, #fff, #ccc); /* Firefox 16+ */
	}
	.tab-shadow .right-grad {
		position: absolute;
		z-index: 3;
		width: 20%;
		height: 2px;
		right: 0;
		bottom: -2px;
		background-color: #444444;
		background-image: -webkit-gradient(linear, left top, right top, from(#fff), to(#ccc)); /* Saf4+, Chrome */
		background-image: -webkit-linear-gradient(left, #ccc, #fff); /* Chrome 10+, Saf5.1+, iOS 5+ */
		background-image:    -moz-linear-gradient(left, #ccc, #fff); /* Firefox 3.6-15 */
		background-image:      -o-linear-gradient(left, #ccc, #fff); /* Opera 11.10+ */
		background-image:         linear-gradient(to right, #ccc, #fff); /* Firefox 16+ */
	}
	.shortcode-tabs ul.tab_titles li.nav-tab a {
		text-transform: none !important;
		font: 20px 'Droid Sans',Helvetica,sans-serif !important;
	}
	ul.tab_titles {
		width: 40%;
		margin: 0 auto !important;
	}
	.shortcode-tabs ul.tab_titles li.nav-tab.ui-tabs-selected a, .shortcode-tabs ul.tab_titles li.nav-tab a:hover {
		background: none !important;
		background-image: -webkit-gradient(linear, left bottom, left top, from(#d3d3d3), to(#fff)) !important; /* Saf4+, Chrome */
		background-image: -webkit-linear-gradient(bottom, #d3d3d3, #fff) !important; /* Chrome 10+, Saf5.1+, iOS 5+ */
		background-image:    -moz-linear-gradient(bottom, #d3d3d3, #fff) !important; /* Firefox 3.6-15 */
		background-image:      -o-linear-gradient(bottom, #d3d3d3, #fff) !important; /* Opera 11.10+ */
		background-image:         linear-gradient(to top, #d3d3d3, #fff) !important; /* Firefox 16+ */
	}
	ul.tab_titles li {
		-webkit-box-shadow: 0px 0px 2px 2px #ccc; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
		        box-shadow: 0px 0px 2px 2px #ccc; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
				margin: 0 10px !important;
				position: relative;
				z-index: 1;
	}
	.shortcode-tabs ul.tab_titles li.ui-tabs-selected {
		z-index: 4;
		top: -2px;
		border-top: solid #fff 2px;
		background-color: #fff !important;
	}

End Result

At first, the only thing I was able to do was get each nav item to move up a bit and cover the 2px border above it. That’s because the div used to hide the top of the box shadow was inside another div, which limited its z-index capabilities.

Box-shadow Nav with all CSS & HTML - Friday Next Web Development

Once I ‘un-nested’ the top-shadow cover-up div, it was able to cover the top of the box shadow for this final result:

Box-shadow Nav with all CSS & HTML - Friday Next Web Development

The end result is a sleek navigation setup for tabbed windows, created completely with CSS.

Share This

Share this post with your friends!