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.

 

This is text shadow. The code is shown below.

font-size:18px;
color: #efefef;
text-shadow: 1px 1px 2px #0e0e0e

 

This is text shadow. The code is shown below.

font-size:18px;
color: #efefef;
text-shadow: 4px 4px 8px #0e0e0e

 

This is text shadow. The code is shown below.

font-size:20px;
color: #efefef;
text-shadow: -1px -1px 8px #990000

 

This is text shadow. The code is shown below.

font-size:24px;
color: #0e0e0e;
text-shadow: -2px 2px 10px #ffff00

 

This is text shadow. The code is shown below.

font-size:28px;
color: #ffffef;
text-shadow: 3px 3px 6px #0e0e0e

 

This is text shadow. The code is shown below.

background :#efefff;
padding: 10px 10px;
font-size:22px;
color: #0f0f0f;
text-shadow: 1px 1px 4px #898989

 

When experimenting, be sure to test your final preferences at lower monitor resolutions.