开发者

Cross browser text-shadow

开发者 https://www.devze.com 2022-12-16 08:41 出处:网络
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 consis

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. :)

0

精彩评论

暂无评论...
验证码 换一张
取 消