Sombras

The CSS Podcast - 017: Shadows

Supongamos que te enviaron un diseño para compilar y, en ese diseño, hay una foto de una camiseta cortada con una sombra. El diseñador te dice que la imagen del producto es dinámica y se puede actualizar a través del sistema de administración de contenido, por lo que la sombra también debe ser dinámica. En lugar de una camiseta, la imagen puede ser un visor, pantalones cortos o cualquier otro elemento. ¿Cómo lo haces con CSS?

CSS tiene las propiedades box-shadow y text-shadow, pero la imagen no es texto, por lo que no puedes usar text-shadow. Si usas box-shadow, la sombra está en el cuadro circundante, no alrededor de la camiseta.

Por suerte, hay otra opción: el filtro drop-shadow(). Esto te permite hacer exactamente lo que pidió el diseñador. Hay muchas opciones en cuanto a las sombras en CSS, cada una diseñada para un caso de uso diferente.

Sombra difuminada

Browser Support

• 10
• 12
• 4
• 5.1

Source

La propiedad box-shadow se usa para agregar sombras al cuadro de un elemento HTML. Funciona en elementos de bloque y elementos intercalados.

.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

El orden de los valores de box-shadow es el siguiente:

1. Desplazamiento horizontal: Un número positivo lo empuja hacia la izquierda y un número negativo lo empuja hacia la derecha.
2. Desplazamiento vertical: Un número positivo lo empuja hacia abajo desde la parte superior, y un número negativo lo empuja hacia arriba desde la parte inferior.
3. Radio de desenfoque: Un número más alto produce una sombra más desenfocada, mientras que un número pequeño produce una sombra más nítida.
4. Radio de propagación (opcional): Un número mayor aumenta el tamaño de la sombra y un número menor lo disminuye, lo que hace que tenga el mismo tamaño que el radio de desenfoque si se establece en 0.
5. Color: Cualquier valor de color válido. Si no se define, se usará el color de texto calculado.

Para hacer que una sombra de cuadro sea una sombra interna, en lugar de la sombra externa predeterminada, agrega una palabra clave inset antes de las otras propiedades.

/* Outer shadow */
.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

/* Inner shadow */
.my-element {
    box-shadow: inset 5px 5px 20px 5px #000;
}

Varias sombras

Puedes agregar tantas sombras como quieras con box-shadow. Para lograrlo, agrega una colección de conjuntos de valores separados por comas:

.my-element {
  box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
    inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}

Propiedades que afectan a box-shadow

Si agregas un border-radius a tu cuadro, también se verá afectada la forma de la sombra del cuadro. Esto se debe a que CSS crea una sombra según la forma del cuadro, como si la luz estuviera apuntando hacia él.

.my-element {
  box-shadow: 0px 0px 20px 5px darkslateblue;
  border-radius: 25px;
}

Si tu cuadro con box-shadow está en un contenedor que tiene overflow: hidden, la sombra no saldrá de ese desbordamiento.

<div class="my-parent">
  <div class="my-shadow">My shadow is hidden by my parent.</div>
</div>

.my-parent,
.my-shadow {
  width: 250px;
  height: 250px;
}

.my-shadow {
  box-shadow: 0px 0px 20px 5px darkslateblue;
}

.my-parent {
  overflow: hidden;
}

Sombra del texto

Browser Support

• 2
• 12
• 3.5
• 1.1

Source

La propiedad text-shadow es muy similar a la propiedad box-shadow. Solo funciona en nodos de texto.

.my-element {
  text-shadow: 3px 3px 3px hotpink;
}

Los valores de text-shadow son los mismos que los de box-shadow y están en el mismo orden. La única diferencia es que text-shadow no tiene un valor spread ni una palabra clave inset.

Cuando agregas un box-shadow, se recorta a la forma de tu cuadro, pero text-shadow no tiene recorte. Esto significa que, si el texto es completamente o semitransparente, se puede ver la sombra a través de él.

.my-element {
  text-shadow: 3px 3px 3px gold;
  color: rgb(0 0 0 / 70%);
}

Varias sombras

Puedes agregar tantas sombras como quieras con text-shadow, al igual que con box-shadow. Agrega una colección de conjuntos de valores separados por comas y podrás crear efectos de texto muy interesantes, como texto en 3D.

.my-element {
  text-shadow: 1px 1px 0px white,
    2px 2px 0px firebrick;
  color: darkslategray;
}

Sombra paralela

Para lograr una sombra que siga las posibles curvas de una imagen, usa el filtro drop-shadow de CSS. Esta sombra se aplica a una máscara alfa, lo que la hace muy útil para agregar una sombra a una imagen recortada, como en el caso de la introducción de este módulo.

.my-image {
  filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}

Término clave: En otro módulo, explicamos los filtros de CSS, pero, en resumen, los filtros te permiten aplicar varios efectos gráficos a los píxeles de un elemento.

El filtro drop-shadow tiene los mismos valores que box-shadow , pero no se permiten la palabra clave inset ni el valor spread. Puedes agregar tantas sombras como desees. Para ello, agrega varias instancias de valores drop-shadow a la propiedad filter. Cada sombra usará la última como punto de referencia de posicionamiento.

Verifica tu comprensión

Pon a prueba tus conocimientos sobre las sombras

¿Cuál de los siguientes valores de sombra es exclusivo de box-shadow?

Desplazamiento horizontal

Vuelve a intentarlo.

Desplazamiento vertical

Vuelve a intentarlo.

Radio de desenfoque

Vuelve a intentarlo.

Radio de propagación

🎉

Color

Vuelve a intentarlo.

inset

Vuelve a intentarlo. inset es una palabra clave que también es exclusiva de box-shadow.

Solo se permiten 13 sombras de cuadro en un elemento a la vez.

Verdadero

No hay un límite oficial.

Falso

Agrega tantas sombras de cuadro como necesites.