CSS DROP SHADOW

CSS3 allows you to apply drop shadow effects to elements without using pictures, much as you do in Photoshop. Before CSS3, sliced images were used to create shadows around elements, which was quite inconvenient.

The steps for applying the shadow to text and elements are illustrated in the following section.

Property box-shadow in CSS3

The box-shadow property can be used to give the element's boxes a shadow. Using a comma-separated list of shadows, you can also add several shadow effects. The basic syntax for making a box shadow is:

  box-shadow: offset-x offset-y blur-radius color;

The following are the definitions of the box-shadow property's components:

• offset-x — Defines the shadow's horizontal offset.
• offset-y — Defines the shadow's vertical offset.
• blur-radius — This property regulates the blur radius. The greater the value, the greater the blur and the more blurred the shadow's edge would be. Negative numbers are not permitted.
• color — Determines the shadow's color. If the color value is omitted or not defined, the color property's value is used.

To learn more about the other potential values, look at the CSS3 box-shadow property.

.box{
  width: 200px;
  height: 150px;
  background: #ccc;
  box-shadow: 5px 5px 10px #999;
}

Output:

Similarly, you can use a comma-separated list to add several box shadows:

.box{
  width: 200px;
  height: 150px;
  background: #000;
  box-shadow: 5px 5px 10px red,
  10px 10px 20px yellow;
}

Output:

Text-shadow property in CSS3

The text-shadow property can be used to add shadow effects to text. Using the same notation as box-shadow, you can add several shadows to text.

h1 {
  text-shadow: 5px 5px 10px #666;
}
h2 {
  text-shadow: 5px 5px 10px red,
  10px 10px 20px yellow;
}

Output: