Untitled

dabblet.css

.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;
}

dabblet.html

<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>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}