Using :before for interesting shadows by @shoshizilla

dabblet.css

/**
 * Using :before for interesting shadows by @shoshizilla
 */


div {
    background: #725bc4;
    float: left;
    height: 100px;
    margin: 40px;
    position: relative;
    width: 300px;
}

div.crazy::before {
    content: "";
    position: absolute;
    /* Negative positioning is usually a bad idea,
       but we're doing something crazy here */
    top: -5px;
    bottom: 100px;
    left: -30px;
    right: -30px;
      -moz-box-shadow:    0 5px 8px rgba(0,0,0,0.9);
      -webkit-box-shadow: 0 5px 8px rgba(0,0,0,0.9);
    box-shadow:           0 5px 8px rgba(0,0,0,0.9);
      -moz-border-radius:    500px / 10px;
      -webkit-border-radius: 500px / 10px;
    border-radius:           500px / 10px;
}

div.normal {
      -moz-box-shadow:    0 20px 15px -15px rgba(0,0,0,0.9);
      -webkit-box-shadow: 0 20px 15px -15px rgba(0,0,0,0.9);
    box-shadow:           0 20px 15px -15px rgba(0,0,0,0.9);
}
​

dabblet.html

<div class="crazy">Crazy</div>
<div class="normal">Normal</div>
​

settings.json

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