CSS3 Tutorials: Box Shadow Effect

Previously, we wrote a tutorial on creating rounded corners with the aid of CSS3. Today’s tutorial is on another great effect that can be achieved using a CSS3 property, box-shadow. This box-shadow property enables you to apply one or more drop-shadow effect to a box. And again, this effect is only supported in Firefox, Safari, Chrome, and Opera for now.

Box-shadow property contains six attributes:

box-shadow: 1px 1px 1px 1px rgba(0,0,0,1) inset;

property: x-offset, y-offset, blur distance, spread distance, color, inset attribute for inner shadows ;

Attributes Description
x-offset Horizontal offset of the shadow. Positive values to make the shadow fall on right side of box. Negative values to make shadows fall on the left.
y-offset Vertical offset of the shadow. Positive values to make the shadow fall below the box. Negative values to make shadows fall on top of box.
Blur
distance
Negative values are not allowed. If the value is zero, the shadow’s edge will be sharp. The more positive the value, the more blur the shadow is.
Spread distance Negative values cause shadow to shrink inwards. Positive value makes the shadow to expand in all the directions.
Inset Adding this attribute to the syntax will create an inner shadow effect.
Color Color of the shadow. HEX code, RGB or RGBA can be used as the value.

Here are some examples grouped according to the attributes used. I’ve used RGBA for the color. So, I want to explain about RGBA too. RGBA works similar like the previous RGB used in CSS2. But, RGBA includes ‘alpha’ to allow specification of the opacity of a color.

rgba(R,G,B,A)


R : 0-255
G: 0-255
B: 0-255
A:0-1

If you are less familiar with RGB color, you can use online generators and then add an opacity value to create RGBA.

CSS3 “box-shadow” Examples

Without box-shadow usage

This normal box with sharp-edge corners was created using the following code.

<div style=”background-color:#F1F1F1; border:3px solid #DDDDDD;”></div>

This normal box with rounded corners was created using the following code.

<div style=”background-color:#F1F1F1; border:3px solid #DDDDDD;-webkit-border-radius: 20px; -moz-border-radius: 20px;border-radius: 20px;padding: 10px;”></div>

Shadow ( x-offset and y-offset attibutes used)

-webkit-box-shadow: 5px 5px rgba(0,0,0,0.4);

-moz-box-shadow: 5px 5px rgba(0,0,0,0.4);

box-shadow: 5px 5px rgba(0,0,0,0.4);

-webkit-box-shadow: 5px 5px rgba(0,0,0,0.4);

-moz-box-shadow: 5px 5px rgba(0,0,0,0.4);

box-shadow: 5px 5px rgba(0,0,0,0.4);

-webkit-box-shadow: -5px -5px rgba(0,0,0,0.4);

-moz-box-shadow: -5px -5px rgba(0,0,0,0.4);

box-shadow: -5px -5px rgba(0,0,0,0.4);

Blur Attribute usage

-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);

-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);

box-shadow: 5px 5px 5px rgba(0,0,0,0.4);

-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);

-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);

box-shadow: 0px 0px 20px rgba(0,0,0,0.4);

Spread Attribute usage

-webkit-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);

-moz-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);

box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);

-webkit-box-shadow: 0px 0px 10px 20px rgba(0,0,0,0.4);

-moz-box-shadow: 0px 0px 10px 20px rgba(0,0,0,0.4);

box-shadow: 0px 0px 10px 20px rgba(0,0,0,0.4);

Inset Attribute usage for inner shadow

-webkit-box-shadow: 10px 10px inset rgba(0,0,0,0.4);

-moz-box-shadow: 10px 10px rgba(0,0,0,0.4) inset;

box-shadow: 10px 10px rgba(0,0,0,0.4) inset;

Inset with Blur

-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;

-moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;

box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;

Inset with Blur and Spread

-webkit-box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;

-moz-box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;

box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;

From now on, we have planned to write about CSS3 tutorials and hope these tutorials are helpful.

November 12, 2010. This entry was posted in CSS, Tutorials and tagged , , , . Bookmark the permalink.

We Recommend HostGator Hosting

Bloggermint strongly recommends Hostgator Hosting for all of your web hosting needs. Sign up today for WordPress Hosting at just $4.95/month.

Use coupon code "bloggermint" to get 25% discount on any hosting packages. Get an account with Hostgator now!