Cool Image Gallery using CSS3

Cool Image Gallery Using CSS3

DEMO/ DOWNLOAD

<h1 class="deepshadow">Image Gallery</h1>

<div class="gallery">
    <div class="panel">
        <img src="http://picbox.im/image/ef17f82a49-main.png" alt="" />
    </div>
    <div class="panel">
        <img src="http://picbox.im/image/df1a74a1db-xotree.png" alt="" />
    </div>
    <div class="panel">
        <img src="http://picbox.im/image/a6b81db759-bg.png" alt="" />
    </div>
</div>

CSS

* {
    box-sizing:border-box;
    line-height:1.5;
    margin:0;
    padding:0;
}
body {
    background-color:#e43;
    position:relative;
    font-family:Georgia;
}
h1 {
    color:white;
    font-size:2em;
    padding:0.5em;
    font-weight:normal;
    line-height:0;
    background:#e43;
    color:#fff;
    box-shadow:0px 0 10px black;
    margin-bottom:0.5em;
}
h1.deepshadow {
    font: bold 50px/1"Helvetica Neue", Helvetica, Arial, sans-serif;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
}
img {
    width:100%;
    height:100%;
    box-shadow:10px 10px 35px rgba(0, 0, 0, 0.4);
}
.panel {
    display:inline-block;
    background:#e4e4e4;
    margin:2em;
    box-shadow:5px 5px 15px rgba(0, 0, 0, 0.4), inset -1px -1px 1px #fff;
    padding:8px;
    max-width:20em;
    border-radius: 1% 1% 1% 1% / 1% 1% 1% 1%;
}
img {
    max-width:100%;
    height:auto;
}
img:hover {
    border: solid 1px #CCC;
    -moz-box-shadow: 1px 1px 30px #999;
    -webkit-box-shadow: 1px 1px 30px #999;
    box-shadow: 1px 1px 30px #999;
}
.gallery {
    width:90%;
    float:right;
}