Skip to content

Instantly share code, notes, and snippets.

@LeaVerou
Created May 24, 2012 19:40
Show Gist options
  • Save LeaVerou/2783770 to your computer and use it in GitHub Desktop.
Save LeaVerou/2783770 to your computer and use it in GitHub Desktop.
drop-shadow filter vs box-shadow
/**
* 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));
}
.speech-bubble:after {
content: '';
position: absolute;
bottom: -2em;
left: 50%;
margin-left: -.5em;
border: 1em solid transparent;
border-top-color: inherit;
}
<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>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
@daneden
Copy link

daneden commented May 24, 2012

I didn't even know there was a drop-shadow filter coming. This rocks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment