css3 text-shadow in IE9

Question

Is there an easy way to have css3 text-shadow s working in IE9   At least a single text shadow would be great   I guess ideally IE8 is supported as well   I m hoping there s a simple jquery plugin or  htc file which just looks at text-shadow css property of an element and implements it for IE9

User · Accepted Answer

Yes  but not how you would imagine  According to caniuse  a very good resource  there is no support and no polyfill available for adding text-shadow support to IE9  However  IE has their own proprietary text shadow  detailed here    Example implementation  taken from their website  works in IE5 5 through IE9    p shadow        filter  progid DXImageTransform Microsoft Shadow color  0000FF direction 45       For cross-browser compatibility and future-proofing of code  remember to also use the CSS3 standard text-shadow property  detailed here   This is especially important considering that IE10 has officially announced their intent to drop support for legacy dx filters  Going forward  IE10  will only support the CSS3 standard text-shadow

User · Answer

The answer of crdunst is pretty neat and the best looking answer I ve found but there s no explanation on how to use and the code is bigger than needed   The only code you need    element       background-color   cacbcf      text-shadow  2px 2px 4px rgba 0 0 0  0 5       filter  chroma color  cacbcf  progid DXImageTransform Microsoft dropshadow color  60000000  offX 2  offY 2       First you MUST specify a background-color - if your element should be transparent just copy the background-color of the parent or let it inherit  The color at the chroma-filter must match the background-color to fix those artifacts around the text  but here you must copy the color  you can t write inherit   Note that I haven t shortened the dropshadow-filter - it works but the shadows are then cut to the element dimensions  noticeable with big shadows  try to set the offsets to atleast 4    TIP  If you want to use colors with transparency  alpha-channel  write in a  AARRGGBB notation  where AA stands for a hexadezimal value of the opacity - from 01 to FE  because FF and ironically also 00 means no transparency and is therefore useless      Just go a little lower than in the rgba notation because the shadows aren t soft and the same alpha value would appear darker then      A nice snippet to convert the alpha value for IE  JavaScript  just paste into the console    var number   0 5    alpha value from the rgba   notation   0   Math round 0 75   number   255  toString 16    slice -2     ISSUES  The text font behaves like an image after the shadow is applied  it gets pixelated and blurry after you zoom in    But that s IE s issue  not mine    Live demo of the shadow here  http   jsfiddle net 12khvfru 2

User · Answer

I tried out the filters referenced above and strongly disliked the effect it created  I also didn t want to use any plugins since they d slow down loading time for what seems like such a basic effect   In my case I was looking for a text shadow with a 0px blur  which means the shadow is an exact replica of the text but just offset and behind  This effect can be easily recreated with jquery    lt script gt      var shadowText       ie9  normalText   html              ie9  normalText   before   lt div class  shadow  gt     shadowText     lt  div gt      lt  script gt   lt style gt       ie9  shadow   position  relative  top  2px  left  -3px     lt  style gt    This will create an identical effect to the css3 text-shadow below       text-shadow  -3px 2px 0px rgba 0  0  0  1 0     here s a working example  see the large white text over the main banner image  http   www cb restaurantconnectinc com

User · Answer

As IE9 does not support CSS3 text-shadow  I would just use the filter property for IE instead  Live example  http   jsfiddle net dmM2S   text-shadow 1px 1px 1px red     CSS3      can be replaced with  filter  Shadow Color red  Direction 130  Strength 1      IE Proprietary Filter     You can get the results to be very similar

User · Answer

I was looking for a cross-browser text-stroke solution that works when overlaid on background images  think I have a solution for this that doesn t involve extra mark-up  js and works in IE7-9  I haven t tested 6   and doesn t cause aliasing problems   This is a combination of using CSS3 text-shadow  which has good support except IE  http   caniuse com  search text-shadow   then using a combination of filters for IE   CSS3 text-stroke support is poor at the moment   IE Filters  The glow filter  http   www impressivewebs com css3-text-shadow-ie   looks terrible  so I didn t use that   David Hewitt s answer involved adding dropshadow filters in a combination of directions  ClearType is then removed unfortunately so we end up with badly aliased text   I then combined some of the elements suggested on useragentman with the dropshadow filters   Putting it together  This example would be black text with a white stroke  I m using conditional html classes by the way to target IE  http   paulirish com 2008 conditional-stylesheets-vs-css-hacks-answer-neither      myelement       color   000000      text-shadow      -1px -1px 0  ffffff        1px -1px 0  ffffff      -1px 1px 0  ffffff      1px 1px 0  ffffff     html ie7  myelement  html ie8  myelement  html ie9  myelement       background-color  white      filter  progid DXImageTransform Microsoft Chroma color  white   progid DXImageTransform Microsoft Alpha opacity 100  progid DXImageTransform Microsoft dropshadow color  ffffff offX 1 offY 1  progid DXImageTransform Microsoft dropshadow color  ffffff offX -1 offY 1  progid DXImageTransform Microsoft dropshadow color  ffffff offX 1 offY -1  progid DXImageTransform Microsoft dropshadow color  ffffff offX -1 offY -1       zoom  1

User · Answer

Try CSS Generator   You can choose values and see the results online  Then you get the code in the clipboard  This is one example of generated code   text-shadow  1px 1px 2px  a8aaad  filter  dropshadow color  a8aaad  offx 1  offy 1

[internet-explorer-9] css3 text-shadow in IE9

Examples related to internet-explorer-9

Examples related to css3pie

Examples related to css