Said mockup with shelves.
The other day Omar showed me a mockup that had nice looking shelving to hold items. Knowing that mocks rarely resemble actual designs, I decided to give it a go anyway.
My first stop was Google where I found a post by Tim Wright that gave me the initial concept.
My solution:
#shelf {
margin:100px 0;
}
#shelf ul {
margin: 23px 0;
padding: 0;
height: 19px;
border-bottom: 8px solid #999999;
background-color: #ccc;
float: left;
}
#shelf ul:before {
border-right: 38px solid #cccccc;
border-top: 18px solid #FFFFFF;
content: "";
float: left;
margin: 0;
width: 0;
}
#shelf ul:after {
border-left: 38px solid #cccccc;
border-top: 18px solid #FFFFFF;
content: "";
float: right;
margin: 0;
width: 0;
}
#shelf li {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid;
float: left;
list-style: none outside none;
margin: -27px 10px 0;
padding: 3px;
position: relative;
text-align: center;
width: 80px;
}
#shelf a {
padding: 7px;
display: block;
text-decoration: none;
background: #555;
color: #fff;
}
Above is how she looks, view the standalone demo.
You’ll notice it is not exact, but it is a proof of concept and should not need much more tweaking to get it there.
Enjoi.
Note: Tested in all major browsers and you lose the nice perspective on the ends in IE6/7.
