CSS: possible text-shadow enhancements
By jor on Wednesday 22 December 2010, 13:23 - Permalink
It's been more than one year since text-shadow is implemented in major browsers (well, except IE...) and usable for all sorts of effects. Still, there are two limitations that have not yet been addressed.
There is a
text-outline property, that is mainly a replica of text-shadow, with the addition of a spread radius, but with needless limitations. It only allows one outline, and it cannot be offset around.
It is not yet implemented by any browser, so instead a simpler solution could be to just add an optional spread radius for
text-shadow. The advantages are multiple:
- you can move the outline(s) around for "relief-like" effects
- in some situations, a shadow is barely visible when you use large "blur" values. In those cases, the current workaround can be to specify multiple times the same shadow. It is far from elegant, and using a spread radius instead would assure the author that the large blur isn't enough to make the shadow invisible.
- the "box-shadow" property also has a spread radius, so it would be more consistent to have it for text-shadow, too
- it allows multiple outlines (including semi-transparent ones)
- it allows the author to stack shadows and outlines in any arbitrary order. The number of effects that can be achieved is thus much higher
I have recently created a mock-up with the canvas tag, to see what kind of effects could be achieved this way, with a few examples. Obviously, a real designer could create much better stuff, though.
Another problem is that the author may rely on text-shadow (or outline effects) to make the text visible, using (near-)identical foreground and background color, and a different shadow / outline color. For example:
- color: white;
- background: white;
- text-shadow: black 0 0 3px;
(See also the w3c example page).
However, if the user's browser does not support text-shadow, the text will not be visible. There is no CSS-only solution to this problem yet. Here a simple fix could be to allow
text-shadow to accept foreground color as well, like this:
- color: black;
- background: white;
- text-shadow: white, black 0 0 3px;
Here there is only one CSS declaration to specify both color (white) and text-shadow (black 0 0 3px) at once. An old browser will not understand it, and thus ignore it, seeing just the color and background declarations.