Drop Shadows

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);

<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.


snippet
-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);

Note:-
Notes
Opera and Firefox support this default behavior, but WebKit doesn’t, so be sure to include the color. Most of the time, though, shadows will be partially transparent. So RGBA or HSLA color should be used usually.
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 # # # # #