box-shadow, resize - Learning Css3

dabblet.css

/**
 * box-shadow, resize - Learning Css3
 */
div { width: 100px; height: 100px; border: solid 1px #ccc;
margin: 20px; float: left; }

/* box-shadow: h-shadow v-shadow blur spread color inset; */
.shadow1 { box-shadow: 5px 5px 8px #f06; }
.shadow-inner { box-shadow: 0 0 10px #f06 inset; }
.shadow-oneside { box-shadow: 5px 0 5px -5px #f06; }
.shadow-multi-border { box-shadow: 0 1px 0 #FFF inset; border: solid 1px #e6e6e6; background: linear-gradient(bottom, #FFF, #f5f5f5); width: 500px; height: 35px; }

/**
 * resize:  none | both | horizontal | vertical;
 * Note: The resize property applies to elements
 * whose computed overflow value is something other than "visible".
 */
.resizable { resize: horizontal; overflow: auto; }

dabblet.html

<div class="shadow1"></div>
<div class="shadow-inner"></div>
<div class="shadow-oneside"></div>
<div class="shadow-multi-border">shadow as multi border</div>
<div class="resizable"></div>

settings.json

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