Playing with text-shadows
text-shadow allows for interesting effects on text.
The property takes two or three values with an optional color as the fourth value
- offset-x and offset-y (Required)
- These values specify the shadow's distance from the text.
offset-xspecifies the horizontal distance; a negative value places the shadow to the left of the text.offset-yspecifies the vertical distance; a negative value places the shadow above the text.- If both values are 0, the shadow is placed directly behind the text, although it may be partly visible due to the effect of
blur-radius. - blur-radius (Optional).
- The higher the value, the bigger the blur; the shadow becomes wider and lighter.
- If not specified, it defaults to 0.
- color (Optional)
- The color of the shadow. It can be specified either before or after the offset values. I prefer to put it at the end, as the fourth value.
- If unspecified, the color's value is left up to the user agent, so when consistency across browsers is desired you should define it explicitly.
I normally use text shadows on larger text, like display text or titles. Just like I did with box shadows, I created a quick visualizer to see what exact values do with the text.
The one change that I've made from the spec is that I'm requiring a color for the shadow, defaulting it to black.
You can use more than one shadow in text-shadow properties. When you do so, the shadows are applied front-to-back, with the first-specified shadow on top.
One final note: The look of the shadows depends on the font you use. You should change the font on the visualizer to match the font you're using for your content.