Fun with CSS

Text Shadow

The text shadow property is one of those CSS techniques that has been experimental for a few of the last releases of CSS.

It is now supported by the latest versions of all major browsers, except IE9. Internet Explorer is expected to support it in version 10.

I'll start off by saying that I don't recommend text shadow for dark text on very light or white background colors. You can experiment with it but my experience has taught me to use it with light text on pastel or medium colored backgrounds.

When used properly it adds a nice raised almost 3 dimensional appearance to your text.

It can be used with any text element.

The text-shadow property accepts the following values:
text-shadow: h-shadow v-shadow blur color;

h-shadow Required. The position of the horizontal shadow. Accepts Negative values.
v-shadow Required. The position of the vertical shadow. Accepts Negative values.
blur Optional. The blur distance
color Optional. The color of the shadow.

Examples of Text Shadow

Below we'll present a few examples. Because we use text shadow on our website we will add the values with inline style sheets. If using an IE browser, you won't see it until the next release(version 10).

When you start experimenting, you'll place the values in your linked style sheet.

Text shadow is optional and a matter of the taste of the author.