Geek asks and answers

IE Filters - Shadow affects text; Does gradient + shadow affect the field?

When I attach the following to a div, I get a window with a gradient and shadow in IE:

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#D08080', EndColorStr='#E7A292') progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=170, Color='#B8B8B8');

However, when I do the JUST shadow filter, I get a shadow on the text inside the div. Besides the obvious (and ugly) hack of setting a filtered gradient with a constant color, how can I get a simple div for the shadow of itself, and not its text in all versions of IE?

+3
source share
2 answers

IE filters are always an ugly hack, it can be hard to get right, and very often cause strange errors. My recommendation is to avoid using them where possible.

Check out CSS3Pie for a neat way to fix the problem.

CSS3Pie - IE, CSS filter . border-radius.

, .

+2

IE CSSPie. IE 7 8 , , , . ( ).

- . IE 7-10, Chrome FF, - , Safari . , , , .

.wrapper {
border: solid 1px #A7A7A7;
background-color:#ffffff;/*transparent won't work*/
}

.shadow {
-moz-box-shadow: 2px 2px 3px #A7A7A7;
-webkit-box-shadow: 2px 2px 3px #A7A7A7;
box-shadow: 2px 2px 3px #A7A7A7;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#A7A7A7')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#A7A7A7');
}


<div class="wrapper shadow">
   <div id="someInnerDiv">
      <p>Some text that used to inherit the box-shadow, but doesn't anymore</p>
   strong text</div>
</div>
+2
source

More articles:


All Articles