Sombras

Podcast de CSS - 017: Sombras

Digamos que te enviaron un diseño para construir y allí hay una imagen de una camiseta cortadas, con una sombra paralela. 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 paralela también debe ser dinámica. En lugar de una camiseta la imagen podría ser un visor, un pantalón corto o cualquier otro artículo. ¿Cómo lo hacemos con CSS?

CSS tiene la box-shadow y Propiedades 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, existe otra opción: drop-shadow(). Esto te permite hacer exactamente lo que el diseñador pidió. Hay muchas opciones cuando se trata de sombras en CSS, cada uno diseñado para un caso de uso diferente.

Sombra difuminada

Navegadores compatibles

  • Chrome: 10.
  • Límite: 12.
  • Firefox: 4.
  • Safari: 5.1

Origen

La propiedad box-shadow sirve 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 para box-shadow es el siguiente:

  1. Desplazamiento horizontal: un número positivo lo desplaza desde la izquierda y un número negativo lo hace desde la derecha.
  2. Desplazamiento vertical: un número positivo lo baja desde la parte superior, y un número negativo lo empuja desde abajo hacia arriba.
  3. Radio de desenfoque: un número mayor produce una sombra más desenfocada, mientras que un número pequeño produce una sombra más nítida.
  4. Radio de dispersión (opcional): un número mayor aumenta el tamaño de la sombra y un número menor la disminuye, para que sea del 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 esto, se usará el color del texto calculado.

Para hacer que una sombra de caja sea una sombra interior, en lugar de la sombra exterior 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 desees 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 la sombra de cuadro

Agregar un elemento border-radius a tu cuadro también afectará la forma de la sombra del cuadro. Esto se debe a que CSS crea una sombra basada en la forma del cuadro como si la luz apuntara hacia ella.

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

Si el cuadro con box-shadow está en un contenedor que tiene overflow: hidden, la sombra tampoco tampoco 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

Navegadores compatibles

  • Chrome: 2.
  • Límite: 12.
  • Firefox: 3.5
  • Safari: 1.1.

Origen

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 elemento box-shadow, se recorta a la forma de tu cuadro. pero text-shadow no tiene recortes. Esto significa que si el texto es completamente o semitransparente la sombra es visible 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 puedes crear efectos de texto realmente geniales, como texto 3D.

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

Sombra paralela

Para lograr una sombra paralela que siga cualquier curva potencial 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 la introducción de este módulo.

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

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

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre las sombras

¿Cuál de los siguientes valores paralelos es único de box-shadow?

Desplazamiento horizontal
Vuelve a intentarlo.
Desplazamiento vertical
Vuelve a intentarlo.
Radio de desenfoque
Vuelve a intentarlo.
Radio de dispersió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 límite oficial.
Falso
Agrega tantas sombras de cuadros múltiples como necesites.