CSS3: Background And DropShadows:

1. CSS3: Background And
DropShadows:
8

2. CSS3: Background
And Drop-Shadows:
The CSS3 provides several new properties to manipulate
the background of an element like background clipping,
multiple backgrounds, and the option to adjust the
background size. The following section will describe you all
the new background features of CSS3.
The CSS3 gives you ability to add drop shadow effects to
the elements like you do in Photoshop without using any
images. Prior to CSS3, sliced images are used for creating
the shadows around the elements that was quite annoying.

3. CSS3 background-size Property
The background-size property can be used to specify
the size of the background images. Prior to CSS3,
the size of the background images was determined
by the actual size of the images.
The background image size can be specified using
the pixels or percentage values as well as the
keywords auto, contain, and cover. Negative values
are not allowed.
Check Next Slide For An Example:

5. CSS3 background-clip Property
The background-clip property can be used to specify whether
an element's background extends into the border or not. The
background-clip property can take the three values: border-
box, padding-box, content-box.

6. CSS3 background-origin
Property:
The background-origin property can be used to specify the
positioning area of the background images. It can take the
same values as background-clip property: border-box,
padding-box, content-box.

7. CSS3 Multiple Backgrounds:
CSS3 gives you ability to add multiple backgrounds to a
single element. The backgrounds are layered on the top of
one another. The number of layers is determined by the
number of comma-separated values in the background-
image or background shorthand property.

8. CSS3 Box-shadow Property:
The box-shadow property can be used to add
shadow to the element's boxes. You can even apply
more than one shadow effects using a comma-
separated list of shadows. The basic syntax of
creating a box shadow can be given with:
box-shadow: offset-x offset-y blur-radius color;

9. The components of the box-shadow property have
the following meaning:
•offset-x — Sets the horizontal offset of the shadow.
•offset-y — Sets the vertical offset of the shadow.
•blur-radius — Sets the blur radius.
The larger the value, the bigger the blur and more the
shadow's edge will be blurred.
Negative values are not allowed. Color sets the color
of the shadow. If the color value is omitted or not
specified, it takes the value of the color property.

10. The components of the box-shadow property have
the following meaning:
•offset-x:Sets the horizontal offset of the shadow.
•offset-y: Sets the vertical offset of the shadow.
•blur-radius: Sets the blur radius. The larger the value, the
bigger the blur and more the shadow's edge will be blurred.
Negative values are not allowed.
•Color sets the color of the shadow: If the color value is
omitted or not specified, it takes the value of the color
property.

11. CSS3 text-shadow Property
You can use the text-shadow property to apply the shadow
effects on text. You can also apply multiple shadows to text
using the same notation as box-shadow.