Drop Shadows

Although CSS3 is still a working draft, and not yet an published standard, we will take a look at some of the features that are already being embraced by some of the top browsers. Think twice before using cutting edge HTML or CSS standards (or working draft in this case) because it can take years before the majority of Web surfers are using current browser technology. Although I prefer not to use browser specific styles, we're going to look at a few in this chapter.

Text Shadows

We can use the following CSS3 syntax to add a drop shadow to text.

text-shadow: color offsetX offsetY blur;

Where color is the color of the shadow, offsetX and offsetY are the distance of the shadow from the text. We can use negative values to move the shadow to the left and up. Finally, blur defines the amount of space the shadow text is stretched. Here's an example using

text-shadow: red 5px 5px 3px

Text Shadow Example <--This should look like this-->

If they don't look the same, your browser does not support this CSS3 feature.

Take a few minutes and play with the demo provided by our publisher.

Box Shadows

We can add a drop shadow to any page element with

box-shadow: [inset] color offsetX offsetY blur [spread];

where color, offsetX, offsetY and blur are identical to text shadows. The optional inset value to display shadows within the object - causing the offsetX and offsetY values to be switched - negative vs. positive values do the opposite.

Since the default size of the box shadow is equal to the size of the object, we can increase or decrease the size of the shadow relative to the element size by using the optional spread value. We can also apply multiple box shadows by creating a comma separated list of shadow values. For example, the following styles

background-color: blue; 
box-shadow: inset rgb(0, 51, 101) -10px -15px 15px, 
inset white 5px 5px 5px

Will create the following box shadow

<--This should look like this-->

if your browser supports this CSS3 feature.

Our textbook suggests that, in order to provide the greatest cross browser support, we should use browser extensions as follows.

-moz-box-shadow: 
-webkit-box-shadow:
box-shadow: 

Take a few minutes and play with the demo provided by our publisher.