Aprende a manejar la propiedad box-shadow de CSS3 y genera sombras a tus elementos HTML, mejorando el estilo de tu sitio web.

La propiedad box-shadow de CSS3 se utiliza para arrojar una o más sombras a un elemento. Prácticamente, cualquier elemento puede obtener una sombra utilizando esta propiedad.

Box-shadow permite implementar fácilmente sombras múltiples (externas o internas) en los elementos, especificando valores de color, tamaño, desenfoque y desplazamiento.

El soporte para navegadores está creciendo últimamente con Mozilla (Firefox), Webkit (Safari / Chrome / Konqueror), Opera y la Vista previa de la plataforma IE9, todo lo cual ofrece una implementación decente de la especificación, aunque Mozilla y Webkit todavía requieren sus respectivos -moz- y -webkit - prefijos (note que Mozilla Firefox 4.0+ ya no requiere el prefijo -moz-).

La sintaxis de box-shadow es la siguiente:

box-shadow:  [inset? && [   ??     ? ] ]

Parámetros de la propiedad box-shadox:

inset

Si no se especifica(por defecto), la sombra asume una sombra difuminada (como si la caja fuera levantada por encima del contenido).

La presencia de la palabra clave inset  cambia la sombra a una dentro del marco (como si el contenido estuviera deprimido dentro de la caja). Inset shadows dibuja dentro del borde (incluso de los transparentes), por encima del fondo, pero por debajo del contenido.

Estos son dos valores permiten definir el desplazamiento de la sombra. 

especifica la distancia horizontal. Los valores negativos colocan la sombra a la izquierda del elemento.

  especifica la distancia vertical. Los valores negativos colocan la sombra por encima del elemento.

Si ambos valores son 0, la sombra es ubicada detrás del elemento.

Cuando mayor sea este valor, mayor será la difuminación, por consecuencia la sombra se vuelve más grande y ligera. Los valores negativos no son permitidos. Si esto no es especificado, su valor será 0 (el borde de la sombra es fuerte).

Los valores positivos harán que la sombra se expanda y crezca más, los valores negativos harán que la sombra se reduzca de tamaño. Si no se especifica, este será 0 (la sombra será del mismo tamaño del elemento).

Si no se especifica, el color depende del navegador. En Gecko (Firefox), Presto (Opera) y Trident (Internet Explorer), el valor de la propiedad  color es usado.Sin embargo, La sombra de  WebKit es transparente  y por lo tanto inútil si el color es omitido.

Sombra verde, cuando offset-y se define en negativo la sombra subirá. 

See the Pen box shadow example 1 by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.

Sombra verde, cuando offset-y se define en positivo la sombra baja.

See the Pen box shadow ejemplo 7 by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.

Sombra verde, cuando offset-x se define negativo la sombra ira hacia la izquierda, caso contrario, offset-x positivo irá hacia la derecha como lo vimos en los anteriores ejemplos.

See the Pen box shadow ejemplo 8 by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.

Sombra negra con difuminación.

See the Pen box shadow ejemplo 2 by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.

Doble sombra.

See the Pen box shadow ejemplo 3 by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.

Sombra inset.

See the Pen box shadow ejemplo 4 by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.

Sombra solo blur.

See the Pen box shadow ejemplo 5 by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.

Sombra blur e inset.

See the Pen box shadow ejemplo 6 by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.

Por último veamos una sombra con blur negativo, puede aparentar una sombra detrás.

See the Pen box shadow ejemplo 9 by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.

Recuerda que al definir sobre un elemento la propiedad css, box-shadow para tener más soporte sobre los navegadores usar webkit y moz, de la siguiente manera:

.one-edge-shadow {-webkit-box-shadow: 0 8px 6px -6px black;   -moz-box-shadow: 0 8px 6px -6px black;        box-shadow: 0 8px 6px -6px black;}

Bien en este tutorial conocimos cómo aplicar una sombra sobres los elementos HTML y qué parámetros podemos indicarla a esta propiedad css, recuerda que tenemos un curso gratuito de HTML y CSS y además un curso premium de CSS3, nos leemos en un siguiente tutorial.