public
Created

ie image dropshadow support

  • Download Gist
dropshadow-ie7.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
/*
Dropshadow handling in IE vs. native box-shadow support
 
- Normal box-shadow on .dropshadow
 
/////////////////////
/ +===============+ /
/ | | /
/ | | /
/ | | /
/ | | /
/ +===============+ /
/////////////////////
 
- IE filter on .dropshadow
 
+===============+
|///////////////|
|/ /|
|/ /|
|///////////////|
+===============+
 
If we observe the above dropshadow techniques we can use,
you will notice the difference of an inner vs. outside dropshadow.
For this reason, we need handle IE in it's own special way to get the placement
looking like it sits around the element.
 
If the margin and padding were not applied to the dropshadow in IE it would look like the below diagram.
We therefore need to pull the top-left in to meet the img top-left and
push the bottom-right up and in to meet the bottom-right of the img.
 
+===============+ +===============+
| img | .dropshadow | img |
| +---------------+ z-index: -1; | |-+
| | |      -> | | |
| | | | | |
+=| | +===============+ |
| .dropshadow | | .dropshadow |
+---------------+ +---------------+
 
As the .dropshadow is using filter, this means the whole element is filled
with a black center and blurred/feathered edges. We therefore need to push
the element back in the z-stack so it doesn't overlay and obscure the image.
 
*/
 
.dropshadow{
margin-top: -6px;
margin-right: 6px;
margin-bottom: 6px;
margin-left: -6px;
 
filter:progid:DXImageTransform.Microsoft.Blur(
PixelRadius='6',
MakeShadow='true',
ShadowOpacity='0.75'
);
 
z-index: -1;
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.