Shadows

dabblet.css

/**
*Shadows
*/
 div{	
 	font: 150%/1 Helvetica, sans serif;	
 	float:left;	
 	color: blue;		
 	margin:0.6em 1em;
 	position:relative;
 	max-width: 13em;			
 	min-width: 5em;			
 	max-height: 13em;		
 	min-height: 5em;		
 	padding: 1em 2em;
 	border-radius: 0.5em  0.5em  0.5em 0.5em;	 
 	background-color: rgb(254,245,202);
 	border:1 solid black;	 	 	
 	}
 	
 	div.first {	 	
 		box-shadow:0.4em 0.4em 0.5em 0.6em #666;
 		transform: skew(-10deg, -7deg); 	
 	}
 	
 	div.second {
 	z-index:--10;	 	
 	border-radius: 5px;	
 	box-shadow:0px 0px 1px 1px #666;
 //	transform: skew(10deg, 7deg); 	
 	}

	div.second::after{
		position:absolute;content:"";width:98%;height:98%;z-index:-1;top:11px;left:1%;
		filter:drop-shadow(0em 0.2em 2px rgba(1,6,6, 1));		
		background: radial-gradient(ellipse 100% 10% at bottom center, transparent 12em, rgb(254,245,202) 0);
	}

dabblet.html

<div class="first">Hej. denne tekst er for at gøre opmærksom på at Theresa er usædvanligt dejlig. <br/ > Og for at fylde kassen her ud med bogstaver.</div>
<div class="second">Hej. denne tekst er for at gøre opmærksom på at Stella er usædvanligt dejlig. <br/ > Og for at fylde kassen her ud med bogstaver.</div>
<div class="third">Hej. denne tekst er for at gøre opmærksom på at Maja er usædvanligt dejlig. <br/ > Og for at fylde kassen her ud med bogstaver.</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}