Untitled

dabblet.css

body{
color: #221111;
background-color:#EEE;
fonEEEEEEt-size: 16pt;
min-height: 100%;
font-family: Monaco, Consolas,
	Inconsolata,
	'Deja Vu Sans Mono', 
	'Droid Sans Mono', 
	'Andale Mono', 
	'Lucida Console', Consolas,
	Inconsolata, 
	'Deja Vu Sans Mono', 
	'Droid Sans Mono', 
	'Andale Mono', 
	'Lucida Console', monospace;
	}
	
.stdiv
{

   padding:15px 15px;

   position:absolute;
   
   border-top-left-radius: 3px;   -moz-border-radius-topleft: 3px;
   -webkit-border-top-left-radius: 3px;
   border-bottom-right-radius: 3px;
   -moz-border-radius-bottomright: 3px;
   -webkit-border-bottom-right-radius: 3px;
   border-top-right-radius: 3px;
   -moz-border-radius-topright: 3px;
   -webkit-border-top-right-radius: 3px;
   
}

div{

 position:absolute;
}

.grey{
-moz-box-shadow: 0 0 0 4px #cdcdcd, 2px 1px 8px 4px rgba(10,10,0,.5);   
   -webkit-box-shadow: 0 0 0 4px #cdcdcd, 2px 1px 4px 4px rgba(10,10,0,.5);
   box-shadow: 0 0 0 6px #cdcdcd, 2px 1px 8px 3px rgba(10,10,0,.5);
   background-color: #cdcdcd;

}


.green{
-moz-box-shadow: 0 0 0 4px #494, 2px 1px 8px 4px rgba(10,10,0,.5);   
   -webkit-box-shadow: 0 0 0 4px #494, 2px 1px 4px 4px rgba(10,10,0,.5);
   box-shadow: 0 0 0 6px #494, 2px 1px 8px 3px rgba(10,10,0,.5);
   background-color: #494;

}


.red{
-moz-box-shadow: 0 0 0 4px #BA5555, 2px 1px 8px 4px rgba(10,10,0,.5);   
   -webkit-box-shadow: 0 0 0 4px #BA5555, 2px 1px 4px 4px rgba(10,10,0,.5);
   box-shadow: 0 0 0 6px #BA5555, 2px 1px 8px 3px rgba(10,10,0,.5);
   background-color: #BA5555;


}

.box200
{
width:200px;
height:200px;
}


.box100
{
width:100px;
height:100px;
}


.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }


.stitched{
position:absolute;
border: 2px dashed #fff;   
margin: 20px;


}

.stitched::before, .stitched::after
{
	position: absolute;
	width: 40%;
	height: 20px;
	content: ' ';
	left: 2%;
	bottom: -1%;
	background: transparent;
	-webkit-transform: skew(-5deg) rotate(-5deg);
	-moz-transform: skew(-5deg) rotate(-5deg);
	-ms-transform: skew(-5deg) rotate(-5deg);
	-o-transform: skew(-5deg) rotate(-5deg);
	transform: skew(-5deg) rotate(-5deg);
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	box-shadow: 0 4px 9px 6px rgba(0, 0, 0, 0.6);
	z-index: -1;
}
.stitched::after
{
	left: auto;
	right: 6px;
	-webkit-transform: skew(5deg) rotate(5deg);
	-moz-transform: skew(5deg) rotate(5deg);
	-ms-transform: skew(5deg) rotate(5deg);
	-o-transform: skew(5deg) rotate(5deg);
	transform: skew(5deg) rotate(5deg);
	

	z-index: -1;
} 

dabblet.html

<div style="z-index:1;">
<div class="stdiv stitched grey box100" style="width:400px; top:100px;">Dos</div>
</div>
<div style="z-index:5;">
<div class="stdiv stitched green box100" style="width:400px; left:200px; top:24px;">Uno</div>
</div>
<div style="z-index:90;">&nbsp;
<div class="stdiv stitched red box100" style="height:100px; width:100px; left:670px; top:80px;">Tres</div>
</div>
<div style="z-index:0;">
<div class="stdiv stitched red box100" style="height:100px; width:100px; left:340px; top:180px;">Quattro</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}