Posts tagged "box-shadow"

Using box-shadow CSS property in Dreamweaver CS5.5

The box-shadow property in CSS allows you to apply single and multiple drop shadows to box objects.

Specify the following parameters for the box shadow property:

Color : Color of the shadow
Offset : Position of the shadow with respect to the text object.
Blur radius (optional): Creates an authentic feel for the shadow.
Spread radius (optional): Allows the shadow to scale to the size of the box object. A positive value causes the shadow shape to expand in all directions, while a negative value contracts the shadow shape. 

For more information, see the W3C website.

The box-shadow property has the following format (webkit – supported in Live View):

-webkit-box-shadow:  [x-offset] [y-offset] [blur radius] [spread radius][color];

Example: -webkit-box-shadow: 2px 1px 5px 7px #0C0; 

The box-shadow property has the following format (Mozilla support):

-moz-box-shadow:  [x-offset] [y-offset] [blur radius] [spread radius][color];

Example: -moz-box-shadow: 2px 1px 5px 7px #0C0;

In addition, CSS3 supports the inset property. The ‘inset’ value, if present, changes the drop shadow from an outer shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it). 

The box-shadow property has the following format (webkit – supported in Live View):

-webkit-box-shadow:  [x-offset] [y-offset] [blur radius] [spread radius][color];

Example: -webkit-box-shadow: 2px 1px 5px 7px #0C0;

The box-shadow property has the following format (Mozilla support):

-moz-box-shadow:  [x-offset] [y-offset] [blur radius] [spread radius][color];

Example: -moz-box-shadow: 2px 1px 5px 7px #0C0;

In addition, CSS3 supports the inset property. The ‘inset’ value, if present, changes the drop shadow from an outer shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it).

To apply the box-shadow property to an object, do the following:

  1. In the Border category of the CSS Styles panel, click Add Property.
  2. Select box-shadow from the menu.
  3. Click the “+” icon.
    Enter values for X-Offset, Y-Offset, Blur Radius, Spread Radius, and Color. For color, you can use the color palette to choose a color.