CSS: Sombra de caja

Con CSS es posible añadir bonitos efectos de sombra alrededor del marco de la caja de un elemento HTML. Para ello se usa la propiedad CSS box-shadow, y su funcionamiento es similar a las sombras de los textos. La sombra se proyecta con el mismo tamaño de la caja y mantiene el redondeo de las esquinas.

Si se quiere que la sombra tenga la misma forma que el canal no transparente de una imagen en formato PNG, se puede usar un filtro mediante la propiedad filter con la función drop-shadow().

La propiedad box-shadow admite varios parámetros que permiten definir el desplazamiento o posición de la sombra respecto al elemento HTML, su radio de difuminado, un factor de crecimiento y el color. También se puede producir sombras internas en vez de ser externas, mediante la palabra clave inset.

La sintaxis para proyectar sombras es la siguiente:

selector {
  box-shadow:
    posición X
    posición Y
    difuminado
    crecimiento
    color
}

Código CSS de una sombra de ejemplo:

.sombra {
  box-shadow: 3px 3px 4px #ff7f2a;
}

Así es como se ve la sombra del ejemplo anterior.

La sombra aparece desplazada 3 píxeles a la derecha y 3 píxeles hacia abajo, con un difuminado de 4 píxeles de radio. No se ha indicado ningún valor de crecimiento. Finalmente, se ha indicado el color. La caja tiene las esquinas redondeadas, por tanto la sombra aparece con el mismo redondeo.

No todos los parámetros son necesarios para crear un efecto sombreado. Con los dos parámetros de desplazamiento ya se proyecta una sombra alrededor del elemento. El valor por defecto de esta propiedad es none, ya que ningún elemento muestra sombra a menos que se indique lo contrario.

Tabla de valores:

Desplazamiento

Los dos parámetros de desplazamiento son los únicos que son de uso obligatorio en el uso de la propiedad box-shadow. El valor de estos parámetros será numérico seguido de las unidades de longitud. El primero corresponde al desplazamiento horizontal y el segundo al desplazamiento vertical. Si se usa valores negativos se invierte la dirección de la sombra: hacia la izquierda y hacia arriba.

En el siguiente ejemplo proyectamos una sombra con 3 píxeles de desplazamiento hacia la derecha y hacia abajo. Código CSS:

.pos {
  box-shadow: 4px 4px;
}

Resultado:

En el ejemplo se puede ver como la sombra aparece sin difuminar y con un color por defecto, ya que no indicamos ningún otro parámetro.

Difuminado

El tercer parámetro de la propiedad box-shadow es opcional (se puede omitir) y especifica el difuminado o desenfoque de la sombra. Su valor por defecto es 0, lo que significa que no se difumina, y se puede crear el difuminado con un número cada vez más alto y una unidad de longitud. Es habitual usar píxeles.

Código CSS añadiendo 2 píxeles de difuminado:

.dif {
  box-shadow: 4px 4px 2px;
}

Resultado:

Crecimiento

El cuarto parámetro de la propiedad box-shadow es un factor de crecimiento de la sombra. También es opcional y su valor por defecto es 0, por tanto se puede omitir. Debe introducirse como valor numérico seguido de las unidades de longitud, y al igual que el anterior también es habitual especificar este factor con píxeles. Un valor negativo provocará un decrecimiento de la sombra.

En este ejemplo se añade un crecimiento de 4 píxeles. La sombra no se desplaza en ninguno de los dos ejes, así queda centrada a la caja. Código CSS:

.cre {
  box-shadow: 0 0 2px 4px;
}

Resultado:

Tal y como se puede observar, la sombra queda centrada a la caja del elemento HTML y ha crecido 3 píxeles por cada lado, con un desenfoque de 2 píxeles.

Color

Otro parámetro muy usado es el del color de la sombra. Los colores se pueden especificar mediante una de las 140 palabras clave o haciendo uso de los modelos de color RGB y HSL. También es un parámetro opcional, pero lo más habitual es indicar un color y que figure como último parámetro de la lista.

Código CSS cambiando el color de la sombra:

.salmon {
  box-shadow: 0 0 2px 4px #ff7f2a;
}

Resultado:

Sombra interior

Usando la palabra clave inset como parámetro es posible introducir una sombra por dentro de la caja del elemento HTML. Con esta posibilidad se puede crear bonitos diseños, como botones con efecto 3D. Hay que tener en cuenta que si creamos una sombra interna, los desplazamientos se invierten.

Código CSS creando una sombra interior de color naranja:

.interior {
  box-shadow: inset 0 0 2px 4px #ff7f2a;
}

Resultado:

Múltiples sombras

A un elemento se le pueden añadir varias sombras a la vez, separadas por coma. El orden “Z” de las múltiples sombras viene definido por el orden de declaración: las primeras van arriba del todo y las últimas van por debajo de las demás.

Código CSS creando múltiples sombras:

.multiple {
  box-shadow:
    3px 3px red,
    -3px -3px #ff7f2a,
    inset 0 -50px 25px -20px #00000088;
}

Resultado: