CSSKarma

Main Nav:

• home
• articles
• lab
• research
• portfolio
• contact

Social Nav:

• facebook
• twitter
• dopplr
• plurk
• pandora

Extra Nav:

• RSS
• Twitter
• FatFold

CSS Shelves, giving CSS a 3D look

This is a recent graduate of the CSSKarma lab (link to css shelves in lab). It came about from something I saw on webmonkey.com. The navigation looks like its sitting on a little shelf so I thought I would see if I could recreate that effect with CSS. So here's what I came up with...

Anyone who follows this site knows that I don't support CSS Hacks of any kind; with new browsers becoming more and more compliant, sites are breaking all over the internet. So I don't use or support them. I try and find a way to develop cross-browser compatible CSS without making the design suffer and without using too many div tags

When I sat down to do this I wanted to try and make this happen with 1 wrapper div and an unordered list so you don't lose the ease of normal horizontal navigation. I used links of different length to show that it's quasi-flexible

View CSS Shelves in action

Anyway, I'll get right to it:

HTML:

<div id="shelf">   
<ul>  	 	
<li><a href="#">making a link stand out</a></li>

<li><a href="#">isn't really all that hard</a></li>
<li><a href="#">however, i did seem to swear a lot</a></li>     
</ul>
</div>

CSS:

#shelf{ 
position:absolute; 
top:100px; 
left:200px; 
background:#fff; 
width:700px; 
height:200px; 
font:normal .75em Arial, Helvetica, sans-serif; 
} 
#shelf ul{ 
margin: 0 0 0 -50px; 
padding:0; 
border-top:1px solid #333; 
border-bottom:1px solid #333; height:15px; 
} 
#shelf li{ 
list-style:none; 
background:red; 
margin:0 0 0 50px; 
padding:0; 
float:left; 
border-top:solid 15px #999; 
border-left:solid 20px white; 
position:relative;
width:130px; 
margin-right:20px;
} 
#shelf a{ 
display:block; 
background:#666; 
width:auto; 
height:30px; 
position:absolute; 
top:-40px; 
white-space: nowrap; 
padding: 5px 10px; 
color:#fff; 
text-decoration:none; 
}
#shelf a:hover{background:#444;} 

It's pretty neat and I hope everyone enjoys modifying it. Let me know!

with ease,
_tim