I’m building out a website for a client in which the navigation text has a subtle drop shadow effect behind. Often I’d resort to an image to achieve this effect, but with most browser supporting at least some of CSS 3, especially text-shadow, I figured it would be worth a shot.
text-shadow: 0px 0px 6px #001234;
So, with the above css, I ended up with this effect in Firefox, Safari, and Chrome:
Not bad, however IE completely ignores the effect. There is an alternative, in the form of the IE specific DropShadow filter, which has one major drawback.
It looks like poop. First, we loose Anti-aliasing, making the text ugly, second the shadow is completely hard edged and will only allow you to specific which direction to offset the shadow. Not very helpful for the look I need, and not nearly as flexible as text-shadow.
Fortunately (unfortunately?) there is one feature of IE’s filters that we can exploit, you can stack as many of them together as you’d like. In this case I’m going stack several shadows of differing colors and directions to achieve a softer effect.
filter:
progid:DXImageTransform.Microsoft.dropShadow(color=#8a8772, offX=1, offY=1, positive=1),
progid:DXImageTransform.Microsoft.dropShadow(color=#8a8772, offX=-1, offY=-1, positive=1),
progid:DXImageTransform.Microsoft.dropShadow(color=#8a8772, offX=1, offY=0, positive=1),
progid:DXImageTransform.Microsoft.dropShadow(color=#8a8772, offX=0, offY=1, positive=1),
progid:DXImageTransform.Microsoft.dropShadow(color=#8a8772, offX=-1, offY=0, positive=1),
progid:DXImageTransform.Microsoft.dropShadow(color=#8a8772, offX=0, offY=-1, positive=1),
progid:DXImageTransform.Microsoft.dropShadow(color=#9d9981, offX=1, offY=1, positive=1),
progid:DXImageTransform.Microsoft.dropShadow(color=#9d9981, offX=-1, offY=-1, positive=1),
progid:DXImageTransform.Microsoft.dropShadow(color=#9d9981, offX=1, offY=0, positive=1),
progid:DXImageTransform.Microsoft.dropShadow(color=#9d9981, offX=0, offY=1, positive=1),
progid:DXImageTransform.Microsoft.dropShadow(color=#9d9981, offX=-1, offY=0, positive=1),
progid:DXImageTransform.Microsoft.dropShadow(color=#9d9981, offX=0, offY=-1, positive=1)
And we end up with:
It’s not perfect, but it’s much closer to the original design.
A couple of things to note, IE seems to stack the shadow effect on the previous shadow effect, that’s why the offsets always stay at 1px, but the effect feathers out.
Another caveat was that when I tried to apply the effect to an anchor tag that was set to display:block, IE applied the shadow to the outside of the anchor, not the text. I had to hack a span tag inside my anchor tag to have something to hang this effect on.
The final issue I faced was that the overall effect displaces the text down and to the right. I had to use position:relative with a negative top and left value. This is definitely something you will want to put in a conditional comment block.
If you know of a better way to achieve this effect, let me know.