Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
box-shadow vs filter: drop-shadow 2
/**
* box-shadow vs filter: drop-shadow 2
*/
body {
background: #ddd;
font: 16px/1 sans-serif;
margin: 50px;
}
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));
}
none <div></div>
box-shadow <div class="box-shadow"></div>
filter: drop-shadow <div class="filter-drop-shadow"></div>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment