Advanced CSS Effects

Introduction

Link Effects

Box Shadows

Curves

IMC Home Page

Defining Drop Shadows

Browser Issues

The biggest problem with box shadows is that they are implimented differently for each browser. Without going into technical detail, until recently the Web browsers fell into three general categories that are classified by the technology used to display pages.

• Trident - Used by Internet Explorer
• Webkit - Used by Safari and Chrome
• Gecko - Used by Mozilla-based browsers such as Firefox

However, starting in 2013 there has been some changes that have caused the these categories to become a bit more complicated. When this tutorial was originally created the CSS coding syntax is different for each of these three browsers categories. It was necessary to create three versions of the attributes for the drop shadows. Now, however, one style of syntax applies to all current browser versions. Creating CSS3 box shadows has become simpler.

On the right is a photograph with a simple box shadow applied to it. The syntax for the effect is:

box-shadow: 4px 4px 6px #999999;
-webkit-box-shadow: 4px 4px 6px #999999;
-moz-box-shadow: 4px 4px 6px #999999;

NOTE: Be sure to view this page in more than one browser so that you can see how each browser interprets the CSS rule.

To see how this syntax has to be written for older browser versions, touch your mouse pointer here.

Creating the Box Shadows

You may apply the box shadow to many page elements such as images and divs. They can be applied to tables, too. We have applied the ID #FallRoad to the image. The entire CSS rule for this example is:

#FallRoad {
float: right;
box-shadow: 10px 10px 10px 4px #999999;
}

See the old-style CSS rule right here.

Here is how each property:attribute line breaks down:

• float: right; - simply tells the image #FallRoad to float to the right side
• box-shadow: 10px 10px 10px 4px #999999;
  • 10px - sets the distance that the shadow moves to the right
  • 10px - sets the distance that the shadow moves down
  • 10px - sets the amount of blur
  • 4px - sets how far the shadow spreads
  • #999999 - the color of the shadow

On the next page we will discover how the values of these attributes affect the display of box shadows.

< Return to Page 1 > < Continue to Page 3 >

rlipera@uamail.albany.edu
Interactive Media Center
University Libraries, University at Albany