Box Shadow

 

The CSS3 box-shadow property allows you to easily add multiple drop shadows (outer or inner) on block elements, specifying values for offset, size, blur, and color.

Drop Shadow Outside an Image:

css
  1. .shadow1 {
  2. box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
  3. }
html
  1. <img class="shadow1" alt="" src="images/4137lg.jpg">
Sample

How it Works:

  1. The horizontal offset of the shadow:
    1. a positive number means the shadow will be on the right of the box
    2. a negative offset will put the shadow on the left of the box.
  2. The vertical offset of the shadow:
    1. a negative one means the box-shadow will be above the box
    2. a positive one means the shadow will be below the box.
  3. The blur radius:
    1. if set to 0 the shadow will be sharp
    2. the higher the number, the more blurred it will be.
  4. The spread radius (optional):
    1. positive values increase the size of the shadow
    2. negative values decrease the size.
    3. Default is 0 (the shadow is same size as blur)
  5. Shadow color is typically shown as:
    1. A hex value, such as #000000
    2. A rgba value, such as (0,0,0,0.5)

Notes:

Shadows do not influence layout and may overlap other boxes or their shadows. Nor do they trigger scrolling or increase the size of the scrollable area.

Vendor Prefixes

The box-shadow property is now widely supported by modern browsers and mobile devices. If you need support older browsers, you may want to use the vendor prefixes:

css
  1. .shadow1 {
  2. -webkit-box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  3. -moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  4. -o-box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  5. box-shadow:  1px 1px 8px rgba(0,0,0,0.5);
  6. }

Learn More

We barely scratched the surface on what you can do with the box-shadow property. Below are two links to sites that can generate the code for box shadows and allow you to experiment to get the look you want. The last two links are for inspiration and show some very cool things you can do.