How to Apply Two CSS3 Shadow Effects - dummies

By David Karlins, Doug Sahlin

CSS includes two shadow effects, both of which require at least two properties: horizontal and vertical shadow dimensions. CSS3 effects are rapidly being integrated into web page design, and designers are coming up with some exciting and creative ways to apply them.

CSS3’s shadow effects are as follows:

  • Box-shadow is applied to borders around selectors.

  • Text-shadow applies shadows to text.

Using box-shadow as an example syntax looks like this:

box-shadow: h-shadow v-shadow;

Positive h-shadow values generate a shadow to the right of the text, whereas negative h-shadow values generate a shadow to the left of the text. Positive v-shadow values generate a shadow below the text, whereas negative values create a shadow above the text. Values are normally defined in pixels.

Shadows also often include a blur property. The blur value defines the thickness of the blur element of the gradient — essentially how widely to space the gradient in the shadow. A higher blur value creates a, well, blurrier effect, whereas a lower blur value creates a crisper, sharper drop-shadow. The blur value appears after the h-shadow and v-shadow values in the style definition, like this:

box-shadow: h-shadow v-shadow blur;

You can also define a shadow color (if no color is specified, a browser default color appears).

So, for example, in the following code example, the box-shadow is defined with a horizontal shadow extending 3 pixels to the right, 6 pixels down, with a medium blur effect, one that applies to create a gradient-like blur that extends 3 pixels into the drop-shadow. And a color has been assigned to the box shadow (silver).

box-shadow: 3px 6px 3px silver;

Spread defines the size of the shadow. By default, the shadow is the same size as the element to which it’s applied but you can make that shadow larger (or smaller) by adding a spread value to the style definition.

Adding the insert value to a shadow definition inverts the shadow, placing it inside instead of outside the box.

Here’s an example of a box-shadow definition that creates a shadow that extends 12 pixels to the right and 18 pixels down, is 25 pixels larger than the original element to which it is applied, and is silver in color:

box-shadow: 12px 18px 12px 25px silver;

Applied to a box, the values in the preceding example look like the following:


Finally shadows can be inset — that is, placed inside the element to which they’re applied. The following figure demonstrates how inset impacts the same box-shadow shown previously.


Create a box-shadow effect

Box-shadow effects are defined with two essential parameters: horizontal and vertical offset.

For example, to create a class style that generates a box-shadow with 6 pixels of horizontal offset and 12 pixels of vertical offset, you’d use this code:

box-shadow: 6px 12px;

If you wanted to define the length of the blur, you’d add a third value. And if you wanted to define the color of the shadow, you’d add that color value:

box-shadow: 6px 12px 9px gray;

You need to do more work if the box-shadow is going to work in every modern browser. Chrome, Opera, current installs of Firefox, and IE9 support the box-shadow effect with no prefix. But you still need to create prefixed versions of the code for older versions of Firefox and, at this writing, all versions of Safari.

The following code defines a class selector named box_shadow that works in all current-generation browsers and has some padding and margin values:

.box_shadow {
box-shadow: 6px 12px 9px gray;
-webkit-box-shadow: 6px 12px 9px gray;
-moz-box-shadow: 6px 12px 9px gray;
padding: 9px;
margin: 24px; }

And remember, you’ve defined a class style. To apply that class style, it still has to be attached to an HTML element. For example, you could apply the class style defined in the preceding batch of code to a paragraph tag with the following HTML:

<p class=”box_shadow”>
content goes here

The following figure shows this box-shadow applied to a paragraph in the Safari browser.


Apply shadows to type

The text-shadow effect, oddly enough, is supported in browsers (except for IE) with no prefix required.

The basic, essential syntax for creating a text-shadow is

ext-shadow: h v color

In this syntax, h is the horizontal offset; v is the vertical offset; and color is the color value.

The following example creates a class selector (.text_shadow) that applies a text-shadow with a 4-pixel horizontal offset, a 1-pixel vertical offset, the color dark gray:

.text_shadow {
text-shadow: 4px 1px gray;

Text-shadows are sometimes applied to white type for a clean, inviting effect. The following figure demonstrates the text_shadow class style defined in the preceding code to white type.