Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
box-shadow vs filter: drop-shadow
/**
* box-shadow vs filter: drop-shadow
*/
body {
background: #ddd;
font: 16px/1 sans-serif;
}
div {
margin: 100px;
width: 200px;
background: #fff;
padding: 20px;
position: relative;
}
div:after {
content: "";
position: absolute;
top: 50%;
left: -10px;
margin: -10px 0 0;
border-right: 10px solid #fff;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.box-shadow {
box-shadow: 0 1px 5px rgba(0,0,0,.5);
}
.filter-drop-shadow {
-webkit-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
}
<div class="box-shadow">
box-shadow
</div>
<div class="filter-drop-shadow">
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