Thursday, 11 July 2013

Cross browser box shadows (yet again)

A client recently asked me to make their site a 'copy' (don't ask) of another website. The site needing to be copied had employed one of those shadows using a very long image with a drop shadow at either end and repeated on the Y axis as a background. Plus, top and bottom shadow images to give the 360 degree effect.  This wasn't going to be possible to use with the site which I had developed, since my site was responsive. So I had to return to the old chestnut of drop shadows in IE. If my client was asking for a 'copy' of another site, there was a good chance they were IE users and I couldn't assume I'd get away with providing standard solutions (I can say this, we have a good relationship) .
See below.

.container
{
  margin-top:20px;
  box-shadow:3px 3px 10px 5px #666666;
  -moz-box-shadow:3px 3px 10px 5px #666666;
  -webkit-box-shadow:3px 3px 10px 5px #666666;
  filter:
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=45,strength=2),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=10),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=225,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=315,strength=2);
}

No comments:

Post a Comment