box shadow effect - v2

dabblet.css

/* box shadow effect - v2
  
   http://stackoverflow.com/questions/15047702/uniform-shadows-left-of-and-below-a-corner-of-an-html-element-using-css
 */
   
.shadowBottom{
  background: #fff;
  border: 1px solid #ccc;
  position:relative;
  box-shadow: 0 0 6px rgba( 0, 0, 0, 0.2);
  width: 200px;
  height: 200px;
  margin: 0 auto;  
}

.shadowBottom::before, .shadowBottom::after{ 
  content: '';
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: -1;
  width: 50%;
  height: 90%;
  box-shadow: 0px 10px 30px rgba( 0, 0, 0, 0.4);   
  transform: skewX(-10deg) rotate(-4deg);
}

.shadowBottom::after{
  transform: skewX(10deg) rotate(4deg);  
  left: auto;
  right: 10px;
}

dabblet.html

<div class="shadowBottom">

</div>

dabblet.js

// alert('Hello world!');

settings.json

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