#CSS FONT EXPLORER PLUS#
To approximate a 2px X and 2px Y offset, a direction of 135 degrees (135 degrees is 90 degrees plus 45 degrees (duh?)) and strength of 2 is chosen. The filter takes three arguments for color, direction and strength. This filter takes the original color and fades it to transparent. The example above is the proprietary shadow filter in Internet Explorer. Most often the shadow filter is proposed as an alternative to native text-shadow although the most compelling articles use a combination of blur and glow to achieve a text-shadow effect ( another great example only uses blur). There are a few IE filters that seem promising. Another issue that will become clear later is that IE renders the text with alpha-transparent artifacts that make the text harder to read. For instance, the IE filters will apply to text unless the element has a background applied the filters will also apply to borders if they are present. Of course these filters have drawbacks namely, IE 8 and below apply them very slowly and they have poorly documented features. While IE doesn't directly support the CSS3 text-shadow property, it does support proprietary filters. As noted above, this will not work in IE including version 9.
None of the browsers that support text-shadow require a vendor prefix, making text-shadow extremely easy to implement. ( view live example) textshadow.html Gist page The shadow is red to add the greatest contrast between the black text and the white background.
It must look similar to the implementation in supported browsers and follow the W3C specification as closely as possible.īelow is the example of the goal: the native text-shadow as rendered in Chrome 9. The goal is to create a text-shadow polyfill for IE 9 and below and other browsers that lack support. Read below for an overly thorough explanation of hacking IE filters to get a convincing text shadow. I've created a Textshadow jQuery plug-in for just this purpose. Because the majority (90%) of non-IE browsers already supports text-shadows natively, it's most interesting to try and polyfill IE. Internet Explorer 8 and below do not support text-shadow surprisingly Internet Explorer 9 doesn't either. As of February 2011, text-shadow is only supported in 48% of browsers in use. CSS3 introduced a new text-shadow property that allows for, well, shadows to be placed on text.