Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Internet Explorer - Filter shadow property making inside text ugly

Internet Explorer - Filter shadow property making inside text ugly

Problem

I have a div with a Box Shadow in Internet Explorer (Internet Explorer 7 Internet Explorer 8) applied through following CSS.

box-shadow:        0px 0px 15px #FF00CC;
-o-box-shadow:     0px 0px 15px #FF00CC;
-moz-box-shadow:   0px 0px 15px #FF00CC;
-webkit-box-shadow:0px 0px 15px #FF00CC;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=0),
        progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=90),
        progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=180),
        progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=270),
        progid:DXImageTransform.Microsoft.Chroma(Color='#ffffff');
background-color:#FFFFFF;
border:1px solid #FF00CC;

It is giving it a box shadow, but making the inside text blurred and ugly, that is, black text is losing sharpness:

And without a box shadow properties it's like this:

How can I make the inside text normal besides giving the div a box shadow?

Problem courtesy of: Jaideep Singh

Solution

It can be overcome in Internet Explorer 8 by wrapping in an extra div inside the content with position:relative; and the text again has its glory:

Lorem ipsum dosectetur adipisicing elit
.shadow-box { box-shadow: 0px 0px 15px #FF00CC; -o-box-shadow: 0px 0px 15px #FF00CC; -moz-box-shadow: 0px 0px 15px #FF00CC; -webkit-box-shadow:0px 0px 15px #FF00CC; zoom: 1; filter: progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=0), progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=90), progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=180), progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=270), progid:DXImageTransform.Microsoft.Chroma(Color='#ffffff'); background-color:#FFFFFF; border:1px solid #FF00CC; }

But in Internet Explorer 7 if you use shadow filter it removes cleartype property on font ,and doesnt have any fix as per my search

Thanks to CSS Box Shadow and How to simulate CSS3 box-shadow in IE 6-8 without JavaScript..

Solution courtesy of: Jaideep Singh

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Internet Explorer - Filter shadow property making inside text ugly

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×