Simulate “filter: drop-shadow” behavior for better browser support

Question

I have following design.

And following is the mark up for the same.

<div class="card">
    <div class="card-bar">&nbsp;</div>
    <div class="card-content">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </div>
</div>

Following is CSS for entire layout.

.card {
    display: block;
    margin: auto;
    width: 500px;
    filter: drop-shadow(0px 1px 2px rgba(0,0,0,.5));
}
.card .card-bar {
    height: 60px;
    background: #F8F8F8;
    border-radius: 4px 4px 0px 4px;
}
.card .card-content {
    display: block;
    margin-top: -35px;
    width: 85%;
    float: right;
    padding: 5px 10px 5px 10px;
    background: #F8F8F8;
    border-radius: 0px 0px 4px 4px;
}

Using box-shadow will not give exact same look (or may be I don't know how to make it) so I've used filter: drop-shadow property. And since this property has very limited browser support. How can I attain this with standard box-shadow property?

Answer 1

You could use pseudo-elements to cover the overlap in box-shadows...

.card-bar:after {
  content: '';
  position: absolute;
  top: 0;
  right: -3px;
  border-right: solid #f8f8f8 3px;
  height: 110%;
}

See a demo here: http://jsfiddle.net/2SBBv/

​

Answer 2

You can create an equivalent drop shadow in Firefox with SVG, and use DX filters for IE. I'd create the bar as :before generated content.

.shadowed {
-webkit-filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.5));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, 
Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, 
Color='#444')";
}


<!-- HTML elements here -->

<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation=".2"/>
<feOffset dx="0" dy="1" result="offsetblur"/>
<feFlood flood-color="rgba(0,0,0,0.5)"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>

I've written about this recently: some comparisons between true drop-shadow and box-shadow, and an article on the technique I've just described.