Sombras con CSS3

CSS3 permite mostrar sombras sobre cualquier elemento de la página web con la propiedad llamada box-shadow.

Por ejemplo si necesitamos crear una sombra muy difuminada y que se visualice en la parte inferior derecha de un article:

article{
    box-shadow: 0 6px 6px 0px #696969;
}

Lamentablemente esta propiedad no esta disponible en todos los navegadores. Es por eso que cada navegador tiene su propia propiedad. Por ejemplo las propiedades en cada navegador son:

Safari: -webkit-box-shadow
Firefox: -moz-box-shadow

La siguiente regla CSS3 muestra una sombra en los navegadores de Google Chrome, Safari, Firefox:

article{
     box-shadow: 0 6px 6px 0px #696969;
     -webkit-box-shadows: 0 6px 6px 0px #696969;
     -moz-box-shadows: 0 6px 6px 0px #696969;
}