IMC Home Page | Library Home Page | UAlbany Home Page
Introduction to
Basic HTML 5 & CSS3 Effects

Shadows

Until recently the drop shadows that create 3-D effects behind page elements had to be done using graphics. However, acceptance of the latest CSS5 standards allows browsers to display shadows behind page elements and text without the use of image effects. In this section we will examine how CSS5 shadows are created and used.

Special Note: The examples below use the most current phrasing of the CSS3 rule for box shadows. Web builders who have been applying box shadows for some time may be familiar with an earlier version of how the rule was written. Originally, the box shadow rule had to include three, and at one point four, "alternates," one for each browser group. As the HTML5 and CSS3 techniques become official and are adopted by the browsers, the phrasing often changes. If you have been applying the box shadow effects using the old-style phrasing for browser groups, you should be able switch to the new methods demonstrated here.

Box Shadows

Outdoors on the University at Albany CampusOn the right is an photo graph of the University at Albany campus. Notice that it is a simple photo and does not have any effects applied to it.

 

 

 

 

Outdoors on the University at Albany CampusNext, on the right is the same photograph. This time it has a shadow applied to it. Notice how the shadow creates a sort of 3-D effect.

In the graphics arts world this sort of shadow is called a "drop shadow." However, in the specialized CSS3 phrasing of the World Wide Web, this effect is called a "box shadow."

The CSS3 specification for this box shadow is:

box-shadow: 4px 4px 4px #333;

Because this photograph has margins and a float applied to it, the rule is moderately complicated. The entire rule is:

#Outdoors2 {
float: right;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 20px;
box-shadow: 4px 4px 4px #333;
}

Outdoors on the UAlbany campus near the LibraryWithin the shadow rule there are 4 variables within the attributes. In the photo on the right the first variable, which controls the horizontal position, has been changed to 16 pixels. The specification is:

box-shadow: 16px 4px 4px #333;

 

 

 

Using the same method we can discover what the second variable control by changing the rule to:

box-shadow: 4px 16px 4px #333;

Now we see that the second variable control the vertical position of the shadow.

 

 

 

The third variable can be tested the same way. For the example on the right, the rule is now:

box-shadow: 4px 4px 16px #333;

The third variable controls the "fuzzy factor." The larger the number, the greater the blur effect. As you can see, the 16 pixel value creates a great deal of blur.

 

The last variable is the color of the shadow. The value #333 is a medium-dark gray. You can apply any color using HTML rules.

The photograph has a rule that is now written this way:

box-shadow: 4px 4px 4px #900;

 

 

By changing the values you can create interesting effects. With some experimenting you can come up with a glow:

box-shadow: 0px 0px 40px #0f6;

 

 

 

 

This is a division (div) with a box shadow applied

Box shadows work on nearly any element on a page. On the right is a box shadow applied to a div.

 

 

 

You can even apply a shadow to a table.

It is often useful to see how an entire rule is constructed. Here is the rule for the table, above:

#TableShadow1 {
margin-right: 10px;
margin-bottom: 20px;
margin-left: 20px;
box-shadow: 4px 4px 16px #333;
}

The breakdown of the rule structure is quite simple. The table has been give the id TableShadow1; there is a margin on the right side of 10 pixels; there is a margin on the bottom of 20 pixels; the left margin is 20 pixels; and, lastly, the box shadow is 4 pixels down, 4 pixels right, and 16 pixels blur with a color of gray #333.

Text Shadows

Text shadows are similar to box shadows, except they are applied to text. The only problem is that at the time of this writing is that not all browsers support text shadow.

Special Note: If you are viewing this page and do not see the shadows behind the text in the examples below, try using another browser. As has been the case with other new components of HTML5 and CSS3, you can expect the text-shadow effect to be accepted and displayed by the new browser versions.

Here is an example of a shadow applied to text. Here is the rule phrasing that is used to create the effect:

text-shadow: 4px 4px 4px #333;

The values expresses in the example control the same effects as the values in the box shadow rules. In other words, changing the values in the rule will create the identical changes as in the box shadow. Here is another example:

This text has the values of 6px 6px 1px #300:

text-shadow: 6px 6px 1px #300;

In this instance the shadow has been applied to an entire paragraph, and a class named TextShadow2 has been applied to the paragraph. The HTML code for the paragraph is:

<p class="TextShadow2">This text has the values of 6px 6px 1px #300:</p>

This is standard code technique with no surprises. The CSS rule for the class TextShadow2 is:

.TextShadow2 {
text-shadow: 6px 6px 1px #300;
}

Again, you can see there there are no surprises and the application of a shadow to text is very simple.

<-- Return to top of page -->