I'm looking for a way to get text-shadow that looks like css3 text-shadow, but that works with IE, Firefox, Opera, Safari , etc... The solutions I found either looked messed up or did not look consistent in IE. Thanks
http://www.workingwith.me.uk/articles/css/cross-browser-drop-shadows
.shadow {
height: 1em;
filter: Shadow(Color=#666666,
Direction=135,
开发者_开发技巧 Strength=5);
}
This doesnt work for me... in IE
ul.dropdown a.selected-l {
background-image: url('Images/Navigation/Left_round/hoverL.png');
height: 50px;
width: 130px;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size: large;
color: #FFFFFF;
text-align: center;
text-decoration: none;
line-height: 50px;
vertical-align: middle;
/* pretty browsers*/
text-shadow:#000 0px 0px 5px;
/* ugly ie */
zoom:1;/*force hasLayout*/
position:relative;/*for absolute position of child element*/
;
}
ul.dropdown a.selected-l span {
position:absolute;
left:-7px;top:-7px; /* strength + pixelradius */
z-index:-1;/* force under the normal text */
/* the magic: filters */
filter:
progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)
progid:DXImageTransform.Microsoft.blur(pixelradius=5, enabled='true')
;
zoom:1;/*force hasLayout*/
}
My suggestion will be to use CSS3 text-shadow (for Webkit-based browsers, FF3.5, Opera 9.5).
For IE, use IE conditional comments to implement one of the followings:
- sIFR
- cufon
- FLIR (not too sure about shadow effect)
- IE-DXImageTransform
Some related articles:
- Cufon vs sIFR vs FLIR
- SO - sIFR or FLIR?
- SO - SIFR vs Cufon vs Typeface.js
Check out this post i wrote about this problem:
Crossbrowser Text Shadow with Jquery
Maybe that's more up your alley? It IS using jQuery though and isn't a really über efficient way.. but anyway it's something. :)
精彩评论