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
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 hace desde la derecha.
- Desplazamiento vertical: un número positivo lo baja desde la parte superior, y un número negativo lo empuja desde abajo hacia arriba.
- 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.
- 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.
- 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
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
?
inset
Solo se permiten 13 sombras de cuadro en un elemento a la vez.