CSS
html {
height: 100%;
}
body {
background-color: #543;
background-image: -webkit-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 50%,
hsla(0,0%,0%,.02) 50%, hsla(0,0%,0%,.02) 100%);
background-image: -moz-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 50%,
hsla(0,0%,0%,.02) 50%, hsla(0,0%,0%,.02) 100%);
background-image: -ms-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 50%,
hsla(0,0%,0%,.02) 50%, hsla(0,0%,0%,.02) 100%);
background-image: -o-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 50%,
hsla(0,0%,0%,.02) 50%, hsla(0,0%,0%,.02) 100%);
background-image: linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 50%,
hsla(0,0%,0%,.02) 50%, hsla(0,0%,0%,.02) 100%);
background-position: 50% 50%;
background-size: 20px 20px;
box-shadow: inset 0 0 300px 30px hsla(0,0%,0%,.6);
min-height: 100%;
padding: 300px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
display: block;
height: 300px;
margin: 0 auto;
position: relative;
width: 400px;
}
img {
background: #a6a6a6;
height: 300px;
width: 400px;
}
/* Frame */
a {
border: 1px solid #111;
box-shadow: inset 0 2px 0 -1px hsla(0,0%,100%,.2),
inset 0 50px 50px -30px hsla(0,0%,0%,.6),
inset 0 150px 150px -30px hsla(0,0%,100%,.3),
inset 0 0 5px hsla(0,0%,0%,.6),
inset 0 0 0 9px #111,
0 0 5px 1px hsla(0,0%,0%,.3),
0 6px 6px -3px hsla(0,0%,0%,.3);
padding: 9px;
}
img {
box-shadow: 0 1px 0 hsla(0,0%,100%,.2),
0 0 1px 1px...