Mastering CSS3: Text ShadowsBy Konstantin Kichinsky Our journey to the world of shadows continues. If you missed the article, we explored the basics of using the box-shadow property. Today we are going to focus on the text-shadow. Just to remind you: both properties meanwhile are defined in different modules actually work in a similar way. So if you are already familiar with the box-shadow you will easily understand the basics of the text-shadows art. Before we will jump to the practice lets deep a little bit into the theory to find out what is the difference between both. Browser SupportThe text-shadow rule is supported by many modern browsers including IE10. You can also use it in your Windows Store apps for Windows 8. text-shadow vs box-shadowThe first thing you need to know is that both specs (CSS3 Backgrounds and Borders and CSS3 Text) as for now are in the Working Draft status and thus they still may change. I will also discuss it while talking about the spread distance. If you remember the syntax of the box-shadow it looks like that:
The second rule in the full mode can be expanded as:
The spec for CSS3 Text describes the text-shadow property in a similar way:
Where: Values are interpreted as for ‘box-shadow’. So you may think on the full syntax for a one text-shadow effect as:
There are two differences here: first — you can’t create an inner shadow for the text, and second — there is no spread distance for text-shadow in CSS3 Text. Similar to the box-shadow you can create multiple shadows displayed on top of each other. Now lets have some practice. text-shadowOffsets and colorWe will start from the very first steps — to define some horizontal and vertical offsets all that you need is to write up two length values (1.1–1.4): Positive offsets move the shadow to the right and down (1.1):
Negative values define an offset moved to the left and up (1.2):
Next is the color. Let’s first discuss what happens when the color is omitted. According to current version of the spec: “If the color is absent, the used color is taken from the ‘color’ property.” If you will look across different browsers you may note that their behavior on that differs. Webkit-based browsers use transparent color in that case — and not because they are bad or they are doing something wrong. The point here is that the previous edition of the css3-backgrounds said: omitted colors are a UA-chosen color. I believe it will be fixed in future versions of Chrome, Safari and other webkit-browsers. Omitting the text-shadow color and thus applying to it the same color as the text has could be useful if you would like to create a blurred text effect (see samples 2.3 and 2.4 below). To explicitly set the shadow’s color just add the color you want at the end of the rule:
Note that while working with shadows you can use any color format defined in the CSS3 Color module including rgba() and hsla() functions with alpha-channel. BlurringThe third length parameter is for the blur-radius (2.1–2.4): In accordance with the definition of the blur-radius for the box-shadow property you should use a nonnegative value (0 - for no blurring). Exact blurring algorithm can differ from one browser to another but in mathematical sense they all should be close enough to the Gaussian blur algorithm. In the first two samples (2.1 - 2.2) I’m using different blur-radiuses:
In the second pair (2.3 - 2.4) I’m changing only the text and background color, and both shadows effects are applied using the same CSS-class ‘blurred-shadow’:
Expansion and contractionNow it is time to talk some more about web standards. I believe you should know it before you will try to use the spread value in the text-shadow in any of your projects. While working on the CSS3 Text module CSSWG decided to make a change to the previous version of this spec to allow a quicker progress towards the recommendation status. In this previous edition the text-shadow property included one more (fourth) length parameter — spread distance. Similar to the box-shadow spread-distance for text-shadow allows to expand or contract the shadow. As for now that definition of the text-shadow was moved to the L4 — and today you can find it in the ED for css4-text. Now I’m going to discuss how to use spread, you can try it in the latest versions of IE10 (as I know at the current moment IE is the only browser to support spread for text-shadows). Spread is a really power tool and allows to create some amazing samples! But it also may change in future. So be careful! To increase the shadow set the spread-distance to a positive value (3.1):
To decrease — to a negative one (3.2):
In case of zero-offet spread-distance can be used to outline the text (3.3):
And one more important note! Actually today the fourth length in the text-shadow rule is treated by not supporting browsers as a wrong text-shadow definition, and such rules are simply ignored. So if you would like to provide some level of compatibility for them you will need to double your text-shadows rules like that:
Sometimes the shadow’s expansion could be emulated using multiple shadows with offsets in various directions (see samples 4.6 and 4.7 in the next chapter). Multiple shadowFinally and absolutely similar to the box-shadow you can apply multiple shadows to the text (4.1–4.5): Simple outlining (4.1):
Various blurred shadows with various offsets (4.2):
Neon-effect (4.3):
And another neon-effect (4.4)
Text underlining (4.5):
Emulating expansionAs I already said technically you can use multiple shadows to create something similar to the real shadow expansion. So to emulate the sample (4.6):
You can try to define multiple shadows with different offsets in various directions (4.7):
Actually there is some visual difference. Also you should understand that such technic has limited usage: it is less accurate and also negatively affects the performance of the page rendering. More samplesNow as you already know all the basics of the text-shadows art, let’s try to build something more complex. Classic rainbow (5.1):
Double shadow (5.2):
Flame-shadow (5.3):
Traditional “letter-press” effect (5.4):
Also traditional 3d-text (5.5):
Double shadow for a vintage-effect (5.6)
Transparent text with contracted shadow (this effect also relies on the font size and typeface) - sample (5.7)
Using the text-shadow on the css pseudo-class ::first-letter (5.8)
Interactive sampleIf you wish to play with shadows in an interactive way my colleagues created a cool demo for the Build conference in the last September: “Hands-on: text-shadow”. Note CSS properties discussed in this article are defined in the CSS3 Textmodule which is currently in the Working Draft status. Meanwhile it seems to be quite stable it still can change in details. About the AuthorKonstantin Kichinsky is a developer evangelist focusing on HTML5 and CSS3 web development at Microsoft. Tweet him @kichinsky or read his blog. |