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