El podcast de CSS 017: Shadows
Supongamos que te enviaron un diseño para construir y en ese diseño hay una imagen de una camiseta, cortada, con una sombra paralela. El diseñador te cuenta 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 puede ser un visor, un pantalón corto u otro artículo. ¿Cómo se hace con los 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 que lo rodea, no alrededor de la camiseta.
Afortunadamente, hay otra opción: el filtro drop-shadow().
Esto te permite hacer exactamente lo que pidió el diseñador.
Hay muchas opciones cuando se trata de sombras en CSS, cada una diseñada para un caso de uso diferente.
Sombra del cuadro
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:
- Desplazamiento horizontal: Un número positivo lo desplaza desde la izquierda y un número negativo lo desplaza desde la derecha.
- 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.
- Radio de desenfoque: Un número más grande produce una sombra más desenfocada, mientras que un número pequeño produce una sombra más nítida.
- Radio de distribución (opcional): Un número mayor aumenta el tamaño de la sombra y un número menor la disminuye, lo que hace que tenga el mismo tamaño que el radio de desenfoque si se establece en 0.
- Color: Cualquier valor de color válido. Si no se define este valor, se usará el color de texto procesado.
Para hacer que una sombra cuadrada 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 todas las sombras que quieras con box-shadow.
Para ello, 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 del cuadro
Agregar un 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 él.
.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 se 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
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 box-shadow y en el mismo orden.
La única diferencia es que text-shadow no tiene ningún valor de spread ni de palabra clave inset.
Cuando agregas un box-shadow, este se recorta con la forma de tu cuadro, pero text-shadow no tiene recortes.
Esto significa que si el texto es completo o semitransparente, la sombra será 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 desees con text-shadow, al igual que con box-shadow.
Agrega una colección de conjuntos de valores separados por comas y podrás crear algunos efectos de texto geniales, como texto en 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 hace que sea muy útil para agregar una sombra a una imagen de corte, como es el caso de 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 el valor 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 sombra como punto de referencia de posicionamiento.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre las sombras
¿Qué valor paralelo a continuación es único de box-shadow?
insetinset 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.