[drop-shadow filter vs box-shadow] #LegacyGISTS

dabblet.css

/**
 * drop-shadow filter vs box-shadow
 */

html {
	background: url('http://subtlepatterns.com/patterns/purty_wood.png')
}

.speech-bubble {
	position: relative;
	float: left;
	width: 7em;
	padding: 1em;
	border: .4em dotted;
	border-bottom-style: solid;
	margin: 1em;
	background-clip: padding-box;
	color: white;
	font: bold 200% sans-serif;
	box-shadow: .05em .05em .3em rgba(0,0,0,.6);
}

.speech-bubble + .speech-bubble {
	box-shadow: none;
	-webkit-filter: drop-shadow(.05em .05em .3em rgba(0,0,0,.6));
	filter: drop-shadow(.05em .05em .3em rgba(0,0,0,.6));
	-webkit-blend-mode: overlay;

}

.speech-bubble:after {
	content: '';
	position: absolute;
	bottom: -2em;
	left: 50%;
	margin-left: -.5em;
	border: 1em solid transparent;
	border-top-color: inherit;
}

dabblet.html

<div class="speech-bubble">
	Hi there, I’m a fancy speech bubble 
	with an awful box-shadow
</div>

<div class="speech-bubble">
	Hi there, I’m a fancy speech bubble 
	with a hawt drop-shadow filter!
</div>

<div style="clear:both;">
<div class="speech-bubble">
	Hi there, I’m a fancy speech bubble 
	with a hawt drop-shadow filter!
</div>

<div class="speech-bubble">
	Hi there, I’m a fancy speech bubble 
	with a hawt drop-shadow filter!
</div>

</div>

settings.json

{"view":"split","fontsize":"70","seethrough":"","prefixfree":"1","page":"css"}