djekl
10/9/2012 - 8:37 AM

box-shadow vs filter: drop-shadow 2

box-shadow vs filter: drop-shadow 2

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
none <div></div><br/><br/><br/>
box-shadow <div class="box-shadow"></div><br/><br/><br/>
filter: drop-shadow <div class="filter-drop-shadow"></div>​

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

body {
	background: #ddd;
	font: 16px/1 sans-serif;
	margin: 50px;
	text-align: right;
	}
div {
	display: inline-block;
	margin: 0 50px -2px 10px;
	height: 17px;
	width: 22px;
	background: url(http://f.cl.ly/items/0l0T1Q453z2o2t3n0m24/envelope.png);
	}
	.box-shadow {
		box-shadow: 0 1px 2px rgba(0,0,0,.5);
		}
	.filter-drop-shadow {
		-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
		-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
		-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
		-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
		filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
		}