Skip to content

Instantly share code, notes, and snippets.

@f0urfingeredfish
Forked from anonymous/dabblet.css
Created June 27, 2013 14:36
Show Gist options
  • Save f0urfingeredfish/5876932 to your computer and use it in GitHub Desktop.
Save f0urfingeredfish/5876932 to your computer and use it in GitHub Desktop.
Untitled
.book {
display: inline-block;
margin: 10px;
}
.book img {
vertical-align: middle;
}
.books {
margin-top: 100px;
margin-left: 10px;
}
.book {
position: relative;
-webkit-transform: perspective(173) rotateY(-6deg) translate3d(-195px,0px,-79px);
outline: 1px solid transparent;
margin: 0;
box-shadow: rgba(0,0,0,0.25) 0 20px 20px -10px;
}
.book img {
position: relative;
max-width: 100%;
z-index: 10;
}
.gradient {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.40)));
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
}
.backcover {
position: absolute;
top: 1%;
height: 97%;
width: 100%;
left: 1.3%;
background-color: #6b3c60;
}
.paper {
position: absolute;
top: 1%;
height: 97%;
width: 0.6%;
left: 100%;
background-color: #EFEFEF;
box-shadow: inset 0px 0px 5px #aaa;
-webkit-transform: perspective(170) rotateY(20deg) ;
}
.spine {
width: 13px;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 15;
box-shadow: inset -3px 0 10px 0 rgba(0,0,0, 0.25);
}
.backcover:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
-webkit-transform: perspective(0) rotateY(-25deg) rotateX(76deg)translate3d(29px,-140px,-206px);
background-color: #FFC0CB;
z-index: -1;
background: -webkit-radial-gradient(center, ellipse cover, rgba(99, 99, 99, 0.39) 55%,rgba(255, 255, 255, 0) 100%);
background-position: 12px 87px;
background-repeat: no-repeat;
}
<div class="books">
<div class="book">
<div class="spine"></div>
<div class="backcover"></div>
<div class="gradient"></div>
<img src="http://storybird.s3.amazonaws.com/storyplayer_cover_images/pbfwcyn5x9.jpeg" width="700">
<div class="paper"></div>
</div>
</div>
// alert('Hello world!');
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment