# css3 `box-shadow`

### The `box-shadow` requests at least 3 values, 4 at the maximum:

- the horizontal length of the shadow
  - This value can be positive for a right shadow or negative for an effect to the left.
  - Example:
    box-shadow:10px 10px 20px #000000;
    box-shadow:-10px 10px 20px #000000;
- the vertical length of the shadow
  - This value can be positive for a top shadow or negative for an effect at the bottom.
  - Example:
    box-shadow:10px 10px 20px #000000;
    box-shadow:10px -10px 20px #000000;
- the blur radius - the degree of the blur shadow
  - This value can only be positive with zero as a minimum
  - The highest is this value, the more blurred will be the shadow
  - This value can be omitted, equal to the minimum value of 0 for no blur and neat edges.
  - Example:
    box-shadow:10px 10px 20px #000000;
    box-shadow:10px 10px 0 #000000; equal to box-shadow:10px 10px #000000;
- the shadow’s color
  - Example:
    box-shadow:10px 10px 20px #000000;
    box-shadow:10px 10px 20px black;
    box-shadow:10px 10px 20px rgb(0,0,0);

Box-shadow with positive value

box-shadow: 10px 10px 20px #000;
-webkit-box-shadow: 10px 10px 20px #000;
-moz-box-shadow: 10px 10px 20px #000;

Box-shadow with negative value

box-shadow: -10px -10px 20px #000;
-webkit-box-shadow: -10px -10px 20px #000;
-moz-box-shadow: -10px -10px 20px #000;

box-shadow with no blur

box-shadow:10px 10px #000;
-webkit-box-shadow:10px 10px #000;
-moz-box-shadow: 10px 10px #000;

Box-shadow + border-radius

box-shadow:10px 10px #000;
-webkit-box-shadow:10px 10px #000;
-moz-box-shadow: 10px 10px #000;

Box-shadow inset (currently only supported by Firefox)

box-shadow: inset 5px 5px #000;
-webkit-box-shadow inset :5px 5px #000;
-moz-box-shadow: inset 10px 5px #000;

The shadow is not part of the box model, it does not add dimension such as padding to the element. If we float two boxes with shadow, there is no space between them as there would be in previous techniques where padding was added to display a background shadow image. If you have two elements and you want to show the shadow, you must add sufficient margin to move the second one out of the way:

Box-shadow multiple color side

box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;
-moz-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;
-webkit-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;

### Browser Compatibility:

Firefox, Safari, Chrome, Opera

IE Drop shadow filter: http://msdn.microsoft.com/en-us/library/ms532985%28VS.85%29.aspx

`<DIV STYLE="width:100%; filter: progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310) progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);"> Blurry text with smudge of gray.</div>`

### Tutorials:

Based on: http://css.flepstudio.org/en/css3/box-shadow.html

http://www.bloggingcss.com/en/tutorials/css3-box-shadow-property/

http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/

https://developer.mozilla.org/en/CSS/-moz-box-shadow