Folded Image CSS Effect v2
by secretgspot
HTML
<figure class="folded">
<img src="http://dribbble.com/system/assets/287/40713/screenshots/403914/weapon_09.png?1327847155" alt="Screenshot">
</figure>
CSS
body {
background-color: #ccb194;
background-image: -webkit-linear-gradient(left, hsla(0,0%,0%,.01) 50%, transparent 50%);
background-size: 1em 1em;
font-size: 100%;
}
.folded {
background-color: #fff;
box-shadow: 0 1px 3px 1px hsla(0,0%,0%,.4);
display: inline-block;
left: 50%;
margin: -150px -200px;
position: absolute;
top: 50%;
}
.folded img {
vertical-align: top;
}
.folded:after,
.folded:before {
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
}
.folded:after {
background-image: -webkit-linear-gradient(transparent 75%, hsla(0,0%,0%,.05)),
-webkit-linear-gradient(transparent 75%, hsla(0,0%,0%,.05)),
-webkit-linear-gradient(transparent 75%, hsla(0,0%,0%,.05)),
-webkit-linear-gradient(hsla(0,0%,0%,.05), transparent 75%),
-webkit-linear-gradient(hsla(0,0%,0%,.05), transparent 75%),
-webkit-linear-gradient(hsla(0,0%,0%,.05), transparent 75%),
-webkit-linear-gradient(transparent 75%, hsla(0,0%,0%,.05)),
-webkit-linear-gradient(transparent 75%, hsla(0,0%,0%,.05)),
-webkit-linear-gradient(transparent 75%, hsla(0,0%,0%,.05));
background-position: 0 0%,
0 50%,
0 100%,
50% 0%,
50% 50%,
50% 100%,
100% 0%,
100% 50%,
100% 100%;
background-repeat: no-repeat;
background-size: 33.33333333% 33.33333333%;
}
.folded:before {
background-image: -webkit-linear-gradient(left, transparent 75%, hsla(0,0%,0%,.05)),
-webkit-linear-gradient(left, transparent 75%, hsla(0,0%,0%,.05)),
-webkit-linear-gradient(left, transparent 75%, hsla(0,0%,0%,.05));
...