Skip to content

Instantly share code, notes, and snippets.

@johnsardine
Forked from LeaVerou/dabblet.css
Created June 5, 2012 20:07
Show Gist options
  • Save johnsardine/2877487 to your computer and use it in GitHub Desktop.
Save johnsardine/2877487 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"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment