Shelves

1Password inspired shelves with HTML and CSS More fun at: http://gplus.to/allusis

by erick

HTML

<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<div class="shelf"><!-- shelf wrapper begin -->
  <div class="row" style="border-top:8px solid #444;"><!-- row begin -->
    <div class="border">
      <div class="inner">Content</div><!-- content here -->
    </div>
  </div><!-- row end -->
  <div class="row">
    <div class="border">
      <div class="inner">&nbsp;</div>
    </div>
  </div>
  <div class="row">
    <div class="border">
      <div class="inner">&nbsp;</div>
    </div>
  </div>
  <div class="row">
    <div class="border">
      <div class="inner">&nbsp;</div>
    </div>
  </div>
</div><!-- shelf wrapper end -->

CSS

body {
    background-color:#111;
    margin:50px;
}
.shelf {
    width:400px;
    box-shadow:5px 5px 20px #000;
}
.shelf .row {
    border-style:solid;
    border-width:0 8px 8px 8px;
    border-color:#444 #444 #444 #444;
}
.shelf .row .inner {
    border-style:solid;
    border-width:0 5px 8px 5px;
    border-color:#000 #222 #666 #111;
    height:100px;
    background:url(http://dl.dropbox.com/u/1621719/development/JSFiddle/images/backgrounds/black-Linen.png);
    box-shadow:inset 5px 5px 20px #000, inset 2px -2px 8px #111;
}
.shelf .row .border {
    border-bottom:1px solid #888;
    border-right:1px solid #555;
}