Negative spread distance - Drop Shadows - Web Platform Docs Examples

dabblet.css

/**
 * Negative spread distance - Drop Shadows - Web Platform Docs Examples
 *
 * An example of how a negative spread distance length value affects the drop shadow
 * "Negative values cause the shadow shape to contract."
 *
 * @css-for	Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ 
 * @author	Giuseppe Gurgone
 * @see		http://docs.webplatform.org/wiki/css/properties/box-shadow 
 */

article {
/*	box-shadow: left-offset top-offset blur spread color; */
	box-shadow: 0 20px 5px -10px rgba(0, 0, 0, 0.5);
	
	border: 1px solid #f00;	/* 1px red border just to mark the edges of the article elem */

}

dabblet.html

<article>
	<h1>Negative spread distance - Drop Shadows - Web Platform Docs Exampless</h1>
	<p>An example of how a n spread value affects the drop shadow</p>
	<blockquote cite="http://www.w3.org/TR/css3-background/#box-shadow">Negative values cause the shadow shape to contract.</blockquote>
	<footer role="contentinfo">
		<a href="http://docs.webplatform.org/wiki/css/properties/box-shadow">Learn more about Drop Shadows</a>
	</footer>
</article>

dabblet.js

// alert('Hello world!');

settings.json

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