Box Shadow

BOX-SHADOW PROPERTY

The box-shadow property allows you to add multiple shadows (outer or inner) on box elements. To do that you must specify values as: color, size, blur and offset.

<shadow> = inset? && [ <length>{2,4} && <color>? ]

Rocket science?

Not at all, here’s an quick example:

box-shadow: 3px 3px 10px 5px #000;

This CSS declaration will generate the following shadow:

• A positive value for the horizontal offset draws a shadow that is offset to the right of the box, a negative
  length to the left.
• The second length is the vertical offset. A positive value for the vertical offset basically offsets the
  shadow down, a negative one up.
• You’re not allowed to use negative values for blur radius. The larger
  the value, the more the shadow’s edge is blurred, as it can be seen above.
• Spread distance positive values cause the
  shadow shape to expand in all directions by the specified radius.
  Negative ones cause the shadow shape to contract.
• The color is the color of the shadow.
• The inset keyword (missing above), if present,
  changes the drop shadow from an outer shadow to an inner
  shadow

The above theory it’s just a small amount, if you want to read more, than be my guest and check the W3C specs.

ENOUGH THEORY, LET’S SEE SOME STUFF!

Now let’s see how can you take advantage of this wonderful CSS3 feature. Below I’ll show you how to enhance your designs with the coolest box-shadow techniques!

Add depth to your body

Reference URL

 
body:before 
{ 
   content: "";
   position: fixed;
   top: -10px;
   left: 0;
   width: 100%;
   height: 10px;
   z-index: 100;
   -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   }

Drop shadows

Here are the articles that inspired me, and not only:

• Divya Manian – Drop Shadows with CSS3
• Nicolas Gallagher – CSS drop-shadows without images

#box 
{
  position: relative;
  width: 60%;
  background: #ddd;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 2em 1.5em;
  color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  margin: 60px auto;
}


#box:before, #box:after 
{
  z-index: -1; 
  position: absolute; 
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%; 
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7); 
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);   
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(-3deg);    
  -moz-transform: rotate(-3deg);   
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

#box:after 
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

QUICK TIPS

Try spicing up shadows with RGBa color. The box-shadow property can be used using CSS3 RGBa colors to create shadows with differing levels of opacity. If your browsers supports thebox-shadow property, then it will definitively support the RGBa color mode.

Use multiple shadows in one CSS declaration:

  box-shadow: 3px 3px 10px 5px #000, 0 0 4px rgba(0, 0, 0, .5) inset;

BROWSER SUPPORT

• Internet Explorer 9/10
• Firefox (from 3.5)
• Safari/Chrome
• Opera (from 10.5)