Wood and Glass

@import url(https://fonts.googleapis.com/css?family=Roboto:300);

html,body{width:100%;height:100%;margin:0;padding:0;font-size:1.2em;}

html{background:linear-gradient(rgba(57,173,219,.4) 0%,rgba(42,60,87,.7) 70%,rgba(42,60,87,1) 100%)}

.shelf {

width: 100%;

height: 232px;

margin: 0 auto;

position: relative;

z-index:1;

}

.top,.front {

position: absolute;

background: url('https://storage.ning.com/topology/rest/1.0/file/get/8167916875?profile=original') center center repeat;

background-size: 50%;

}

.top {

width: 60%;

height: 300px;

border-radius:10px 10px 0 0;

left: 20%;

top: 0;

transform: perspective(400px) rotateX(75deg);

-ms-transform: perspective(400px) rotateX(75deg);

-webkit-transform: perspective(400px) rotateX(75deg);

box-shadow:

inset 0 50px 150px -25px rgba(0,0,0,.7),

0 150px 50px -50px rgba(0,0,0,.9);

}

.front {

width:95%;

height: 22px;

border-radius:5px;

left: 2.5%;

bottom: 0;

box-shadow:

inset 0 1px 2px 0 rgba(255,255,255,.8),

inset 0 -1px 2px 0 rgba(0,0,0,.5),

0 -2px 10px -5px rgba(255,255,255,1);

}

.frame{

width:calc(100% - 80px);

height:70%;

border-top:10px solid #333;

border-right:40px solid #222;

border-bottom:10px solid #333;

border-left:40px solid #222;

z-index:10;

background:#252525;

}

nav{

position:absolute;

width:70%;

height:100px;

margin-top:70px;

left:15%;

top:0;

z-index:999;

}

nav ul li{

width:20%;

float:left;

}

nav ul li a{

width:100px;

height:100px;

display:block;

margin:0 auto;

text-align:center;

font-size:75%;

line-height:100px;

font-family:'Roboto', helvetica, san-serif;

color:rgba(255,255,255,.8);

text-shadow:

1px 1px 2px rgba(132,112,255,.8),

-1px -1px 1px rgba(175,238,238,.8);

text-transform:Uppercase;

letter-spacing:2px;

border-radius:50%;

border:1px solid rgba(255,255,255,.8);

box-shadow:

inset 1px 4px 8px -2px rgba(132,112,255,.2),

inset -1px -4px 4px -2px rgba(175,238,238,.7),

-2px -2px 10px -2px rgba(132,112,255,.3),

0 10px 10px -10px rgba(0,0,0,.75);

background:

linear-gradient(-10deg,

rgba(255,255,255,.1) 0%,

rgba(255,255,255,.2) 25%,

rgba(255,255,255,.4) 50%,

rgba(255,255,255,.5) 50%,

rgba(255,255,255,.2) 75%,

rgba(255,255,255,.1) 100%);

transition:all .25s ease-in-out;

-webkit-transition:all .25s ease-in-out;

-moz-transition:all .25s ease-in-out;

-o-transition:all .25s ease-in-out;

-ms-transition:all .25s ease-in-out;

cursor:pointer;

}

nav ul li a:hover{

background:

linear-gradient(0deg,

rgba(255,255,255,.0) 0%,

rgba(255,255,255,.4) 25%,

rgba(255,255,255,.6) 50%,

rgba(255,255,255,.3) 50%,

rgba(255,255,255,.2) 75%,

rgba(255,255,255,.0) 100%);

color:rgba(255,255,255,1);

margin-top:-8px;

font-size:85%;

}