CSS3 provides the feature to add drop shadows to elements using the box-shadow property. This property lets you specify the color, height, width, blur, and offset of one or multiple inner and/or outer drop shadows on your elements.
The box-shadow property takes a comma-separated list of shadows as its value. Each shadow is defined by two to four size values, a color, and the key term inset for inset—or internal—shadows.
The default inset for the shadow will be drawn outside of the element if the inset is not specified.
The syntax for the box-shadow property is as below
box-shadow: <horizontal-offset> <vertical-offset> <blur distance> <spread-distance> <color>; box-shadow: 2px 5px 0 0 rgba(52,52,52,1);
| Values | Description |
|---|---|
| <horizontal-offset> | It is the horizontal offset. A positive value will create a shadow to the right of the element. A negative value to the left. In our example, our shadow is two pixels to the right of the a. |
| <vertical-offset> | It is the vertical offset. A positive value pushes the shadow down, creating a shadow on the bottom of the element. A negative value pushes the shadow up. In our example, the shadow is five pixels below the a. |
| <blur distance> | It is the blur distance of the shadow when included. The greater thevalue, the more the shadow is blurred. Only positive values are allowed. Our shadow is not blurred, so we can either include a value of zero (0), or omit the value altogether. |
| <spread-distance> | It determines the spread distance of the shadow. A positive value will cause the shadow shape to expand in all directions. A negative value contracts the shadow. Our shadow has no spread, so again we can either include a value of zero (0), or omit the value altogether. |
| <color> | It is the color of the shadow. If it’s omitted, the spec states that it should default to the same as the color property of the element. In the example above, we used an RGBA color. In this particular design, the shadow is a solid color, so we could just have used the hex value. |
-webkit-box-shadow: 2px 5px 0 0 rgba(72,72,72,1); -moz-box-shadow: 2px 5px 0 0 rgba(72,72,72,1); box-shadow: 2px 5px 0 0 rgba(72,72,72,1);
To create an inset box shadow, add the inset keyword.
To include two shadows we cover all four sides: one shadow for the top left, and one for the bottom right.
To add multiple shadows to an element, simply need to repeat the same syntax again, separated with comma.
-webkit-box-shadow: inset 1px 1px 84px rgba(0,0,0,0.24), inset -1px -1px 84px rgba(0,0,0,0.24); -moz-box-shadow: inset 1px 1px 84px rgba(0,0,0,0.24), inset -1px -1px 84px rgba(0,0,0,0.24); box-shadow: inset 1px 1px 84px rgba(0,0,0,0.24), inset -1px -1px 84px rgba(0,0,0,0.24);
box-shadow add shadows to boxes, where as text-shadow adds shadows to individual characters in text nodes.
The syntax of the text-shadow property is very similar to box-shadow, including prefixes, offsets, and the ability to add multiple shadows; except that there’s no spread, and inset shadows aren’t allowed:
/* single shadow */ text-shadow: topOffset leftOffset blurRadius color; /* multiple shadows */ text-shadow: topOffset1 leftOffset1 blurRadius1 color1, topOffset2 leftOffset2 blurRadius2 color2, topOffset3 leftOffset3 blurRadius3 color3;
Like box-shadow, when multiple shadows are declared, they’re displayed from front to back with the first shadow being the topmost. Text shadows appear behind the text itself.
An example of test-shadow.
text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);
In the above example, the shadow extends three pixels below the text, three pixels to the right of the text, is slightly blurred (one pixel), and has a base color of black at 50% opacity.
Other examples:
h1, h2, h3 {
text-transform: uppercase;
text-shadow: 1px 1px #FFFFFF;
}
