Tuesday - Text Shadows

Text shadows in Web design work like many of the other CSS properties we've used already, where you list the property and then combine multiple values to define each aspect of that property. With the text-shadow property, the syntax is as follows:

In the above syntax demo, "h-shadow" refers to the position of the horizontal shadow effect, "v-shadow" refers to the position of the vertical shadow effect, "blur-radius" is a distance (you should use rems to define this) across which the shadow will blur, and "color" defines the color of the shadow (you will almost always set this to "black").

In your index.html you should pick something (often either a navigation element or a header of some kind, or even the first letter of the opening paragraph) that would look better with a text shadow applied to it, and then make sure you apply that shadow. For this week's coding challenge, the text shadow should be applied to the .box selector and instead of using the shadow to make the letter look 3D, you will be applying the shadow in all 4 directions so that it looks more like an outline for each letter. This is not what text shadowing was intended to be used to do (and it has some rough edges as a result), but it is sometimes useful and it is worth knowing that you can apply it this way.

For further exploration of text shadows, you can check out W3School's tutorial on the text-shadow property.