How do you use the CSS3 property text-shadow?

Answer 1

Text-shadow is a useful property that is implemented in most modern browsers. To use text-shadow in your CSS style sheets, there are four things you have to set when writing the declaration, how far to the right (or left) the shadow is from the actual text, how far below (or above) the shadow is from the text, how much blur the shadow should have, and finally what color the shadow should have. The first two declarations can be positive or negative; positive numbers cause the shadow to move to the right and below the text, while negative numbers cause the shadow to move to the left and above the text. Here's an example of how to use a text-shadow on an anchor when the user hovers over the anchor:

a:hover {

text-color: #FFFFFF;

background-color: #0198E1;

text-shadow: 2px 2px 2px #FFCC00;

}

When a user hovers over an anchor link the text color will turn white, the background will become a topaz blue, and will have a gold shadow around the text. You can declare multiple shadows on the same element if you want to have a cooler looking text-shadow. Here is an example:

.cooltextshadow {

text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;

}

This text-shadow declaration has 6 drop shadows declared each one offset from the previous one to make a really cool effect. Notice the negative numbers. This effect is mainly above the text and looks like the text is superheated or on fire.

Answer 2

Box-shadow is similar to text-shadow, however box-shadow puts a shadow around the whole element, not just the text (which is what text-shadow does). The usage is almost the same, with the addition of one additional declaration property. The first two values determine the offset of the shadow, the third determines the blur radius, and the fourth value determines the spread radius. The last value is the shadow color. Right now Firefox and Webkit both require specific prefixes to make this work right now. To accomodate that, you declare the prefixed declarations first, then declare the standard box-shadow rule. Here's an example how you would use the box-shadow property:

#exampleboxshadow {

-moz-box-shadow: -5px -5px 5px 5px #888;

-webkit-box-shadow: -5px -5px 5px 5px#888;

box-shadow: -5px -5px 5px 5px #888;

}

This results in a box-shadow that is offset to the left and to the top by 5 pixels with both a blur distance of 5px and a spread distance of 5px.

You can also create an inner shadow by adding the keyword inset to the declaration. This would look like:

#insetboxshadow {

-moz-box-shadow: inset 0 0 5px 5px #888;

-webkit-box-shadow: inset 0 0 5px 5px#888;

box-shadow: inset 0 0 5px 5px #888;

}

This will create an inner shadow that is not offset and both a blur distance of 5px and a spread distance of 5px.

It's also possible to layer multiple shadows, like you can with text-shadow.