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

RGBA Text alternative for IE 9. Can't get this work around to work

RGBA Text alternative for IE 9. Can't get this work around to work

Problem

the whole point of this is to have transparent text with a light white shadow to make the text look like it's embedded into the background. In all other browsers I simply do this to the text:

#mytext{
color: rgba(10, 10, 10, 0.7);
text-shadow: 0px 1px 0px rgba(200, 200, 200, 0.6);
} 

Works like a charm and gives it that great effect. IE, however... Well, you know how it is.

So I thought why not just make the div transparent and use the Shadow filter and we can all go home. Seemed clever at first, but Microsoft always seems to be one step ahead of me lol

 #mytext{
font-family: cowboyTimes;
font-size: 50px;
text-shadow: 0px 1px 0px rgba(200, 200, 200, 0.6);
filter:alpha(opacity=90) Shadow(Color=#FFFFFF, Direction=180, Strength=1);
color: rgba(10, 10, 10, .7);
 }

I think I know what's happening here, I declare the alpha filter, then the shadow filter overwrites it, because if I rearrange the filters I get the last one on the list working. I've tried separating the m with commas, but there was no change at all. What am I doing wrong, or if there is a better way to do this I'm all ears (or eyes)!

Anyway, your help is appreciated!

Thank you for your time!

Problem courtesy of: Philll_t

Solution

#mytext{
font-family: cowboyTimes;
font-size: 50px;
text-shadow: 0px 1px 0px rgba(200, 200, 200, 0.6);
filter: "progid:DXImageTransform.Microsoft.alpha(opacity=90) progid:DXImageTransform.Microsoft.Shadow(Color=#FFFFFF, Direction=180, Strength=1)";
-ms-filter: "progid:DXImageTransform.Microsoft.alpha(opacity=90) progid:DXImageTransform.Microsoft.Shadow(Color=#FFFFFF, Direction=180, Strength=1)";
color: rgba(10, 10, 10, .7);
 }
Solution courtesy of: johnmadrak

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

RGBA Text alternative for IE 9. Can't get this work around to work

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×