The spread distance - Drop Shadows - Web Platform Docs Examples

dabblet.css

/**
 * The spread distance - Drop Shadows - Web Platform Docs Examples
 *
 * An example of how a positive spread distance length value affects the drop shadow
 * "Positive values cause the shadow shape to expand in all directions by the specified radius."
 *
 * @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 0 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>The spread value - Drop Shadows - Web Platform Docs Examples</h1>
	<p>An example of how a positive spread value affects the drop shadow</p>
	<blockquote cite="http://www.w3.org/TR/css3-background/#box-shadow">If the blur value is zero, the shadow's edge is sharp.</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"}