Con la estandarización de CSS3 en los navegadores podemos conseguir en nuestro documento efectos que antes sólo podían alcanzarse usando imágenes de fondo que emulasen esos efectos. Un caso muy frecuente era el de los efectos de sombra paralela, tanto para los contenedores, como cuando queríamos aplicarlo a algún texto para resaltarlo. CSS no contemplaba el uso de estas porpiedades y la única opción pasaba por generar la imagen con su sombra en algún editor de imágenes y luego añadir la imagen como fondo. Como podemos imaginar, eso limitaba mucho el uso de este tipo de efectos.
En cambio, con las nuevas propiedades para definir efectos de sombra con CSS3, este tipo de ajustes se ha vuelto algo muy sencillo y fácilmente configurable. Las propiedades con las que contamos para aplicar efectos de sombra son text-shadow para sombras a textos, y box-shadow para los efectos de sombra a los contenedores. La manera de trabajar con ellas es muy parecida, como vamos a ver.
A la hora de aplicar una sombra a un elemento de texto, usaremos la propiedad text-shadow sobre el elemento que contiene el texto. Esta propiedad necesita 4 valores para definir una sombra:
Cuando definimos esta propiedad debemos seguir este orden para establecer los valores, separándolos por espacios. Un ejemplo de definición de sombra podría ser text-shadow: 4px 4px 2px #CCC; que produciría una sombra de color gris, desplazada 4 píxeles del texto hacia abajo a la derecha, y con un desenfoque de 2 píxeles.
Código
<p class="text-sombra">Este texto tiene un efecto de sombra paralela.</p>
CSS
.text-sombra {
font-family: sans-serif;
font-size: 60px;
font-weight: bold;
color: lime;
text-shadow: 4px 4px 2px #CCC;
}
Muestra
Este texto tiene un efecto de sombra paralela.
Modificando los valores de la propiedad podemos conseguir un efecto que parezca más un resplandor alrededor del elemento que una sombra paralela.
Código
<p class="text-resp">Este texto tiene un efecto de resplandor exterior.</p>
CSS
.text-resp {
color: darkred;
font-size: 60px;
font-weight: bold;
text-shadow: 0 0 30px gold;
}
Muestra
Este texto tiene un efecto de resplandor exterior.
La propiedad text-shadow permite definir varias sombras sobre un mismo elemento de forma que veamos su efecto de forma acumulada. Lo único que tenemos que hacer es separar los valores de cada sombra por una coma, dentro de la misma definición de la propiedad.
Atención No definas dos veces o más la propiedad text-shadow en el mismo elemento porque entonces lo que haces es sobreescribir esa propiedad, mostrando unicamente la sombra definida por última vez, pero anulando las anteriores.
Código
<h3 class="tit-sombra">Titular con efecto de sombra</h3>
CSS
.tit-sombra {
font-size: 100px;
color: white;
text-shadow: 2px 2px 0px #666, -2px -2px 0px #ccc;
letter-spacing: 6px;
}
Muestra
Para aplicar un efecto de sombra paralela a un contenedor usamos la propiedad box-shadow. Esta propiedad tiene los mismos valores que hemos visto para box-shadow, aplicándose de la misma manera:
<div class="sombreada"></div>
CSS
.sombreada {
width: 450px;
height: 450px;
background-color: darkcyan;
box-shadow: 5px 5px 2px #000;
}
Muestra
box-shadow admite un cuarto valor numérico que determina la extensión de la sombra. Es lo que se conoce como spread. Lo ponemos dentro de la definición de la sombra, después del valor de desenfoque y antes del color de la sombra. Los valores positivos hacen crecer a la sombra, partiendo de su tamaño original, que por defecto es el mismo que el del contenedor. Y los valores negativos hacen que esta sea más pequeña.
<div class="marco" id="som_gr">
<div class="marco" id="som_peq">
Y el CSS
.marco {
width: 280px;
height: 280px;
background: darkcyan;
}
#som_gr {
box-shadow: 0 0 5px 20px black;
}
#som_peq {
box-shadow: 80px 40px 0 -30px black;
}
Nos queda así
Grande
Pequeña
En la sombra de las cajas podemos definir un sexto elemento que permite que la sombra se propague hacia dentro del elemento contenedor, en lugar de que se proyecte hacia afuera. Es el valor inset, que puede definirse tanto al principio como al final de la declaración de text-shadow.
<div class="marco" id="inset1">
<div class="marco" id="inset2">
Y el CSS
#inset1 {
box-shadow: 5px -5px 20px black inset;
}
#inset2 {
box-shadow: inset 0 0 41px 20px black;
}
Nos queda así
Inset
Inset + spread
Para aplicar más de una sombra al mismo elemento, seguimos el mismo procedimiento que para text-shadow, separando con una coma cada conjunto de valores para cada sombra, pero dentro la misma propiedad box-shadow.
<div class="marco" id="doble">
Y el CSS
#doble {
box-shadow: 5px -5px 20px black inset, 4px -4px 5px #333;
}
.sombra {
width: 330px;
height: 330px;
background-color: lemonchiffon;
box-shadow: -8em -10rem 5em -7rem #666 inset;
border-radius: 5em/12em;
}
.sombra-text {
width: 380px;
height: 300px;
background-color: darkcyan;
box-shadow: 10px 10px 5px black inset;
line-height: 300px;
font-size: 65px;
text-align: center;
font-weight: bold;
text-shadow: 3px 3px 5px black, -2px -2px 0 gray;
letter-spacing: 6px;
}
<div class="billar"></div>
<div class="billar"></div>
<div class="billar"></div>
CSS
.billar {
width: 250px;
height: 250px;
border-radius: 50%;
box-shadow: 100px 0px 30px -20px rgba(0,40,40,.8) , 46px 0 30px 50px rgba(30,130,130,.5) inset, -120px 3px 20px 10px rgba(30,50,150,.3) inset;
background-color: rgba(0,240,240,.2);
}