Con CSS se puede añadir sombra a los textos de una página web. Las sombras son un recurso de diseño gráfico muy útil, tanto para generar un diseño más atractivo como para mejorar la legibilidad de un texto en determinados ámbitos. Por ejemplo, un texto claro sobre una imagen: se leerá mejor con un sombreado oscuro por debajo. Esto se consigue con la propiedad CSS text-shadow.
Si lo que se quiere es proyectar sombras alrededor de la caja de un elemento HTML se debe usar la propiedad box-shadow.
La propiedad text-shadow admite varios parámetros para describir la sombra. Dos de ellos son obligatorios, referentes al desplazamiento de la sombra respecto al texto, mientras que los otros dos son opcionales: el radio de difuminado y el color. La sombra también se aplicará a los elementos decorativos del texto agregados con la propiedad text-decoration, como sería un subrayado.
Esta es la sintaxis para definir una sombra de texto:
selector {
text-shadow:
posición X
posición Y
difuminado
color
}
Código CSS de una sombra de texto:
.sombra {
text-shadow: 1px 1px 5px blue;
}
Así es como se ve la sombra del ejemplo anterior.
El texto de este párrafo tiene una sombra azul.
Tal y como se puede ver, la sombra ha sido desplazada un píxel a la derecha y otro hacia abajo. Se le ha añadido un difuminado con un radio de 5 píxeles. Finalmente, se ha indicado que debe ser de color azul.
El valor por defecto de esta propiedad es none, equivalente a desactivar la sombra del texto. Los parámetros mínimos para definir una sombra de texto son los de desplazamiento del eje horizontal y del eje vertical, en este orden.
Tabla de valores:
| Valor | Descripción |
|---|---|
none | Desactiva la sombra del texto. |
inherit | Hereda la sombra del elemento padre. |
initial | Fuerza el uso del valor inicial. |
1px 2px | Desplazamiento horizontal y vertical. |
1px 2px 3px | Desplazamientos con difuminado. |
1px 2px 3px red | Desplazamientos con difuminado y color. |
-1px -2px | Desplazamientos negativos. |
Desplazamiento
Los parámetros para indicar el desplazamiento horizontal y vertical de la sombra del texto son de uso obligatorio. Su valor será un número seguido de las unidades de longitud. Con los números positivos se realiza el desplazamiento hacia la derecha y hacia abajo. Para los lados opuestos debe usarse números negativos. Si se quiere que la sombra esté centrada se indicará el valor 0 a los dos ejes.
Código CSS de sombra de texto con desplazamiento:
.pos {
text-shadow: 1px 1px #ff7f2a;
}
Resultado:
Texto con sombra desplazada un píxel.
En este ejemplo la sombra del texto aparece sin difuminar y se ha indicado el color naranja para facilitar la legibilidad, pero no era obligatorio. El color por defecto es el negro (#000000), que impedía la lectura del texto.
Difuminado
El siguiente parámetro de la propiedad text-shadow es el que hace referencia al radio de desenfoque o difuminado, y se trata de un parámetro opcional. Su valor por defecto es 0, equivalente a evitar el desenfoque. Su valor será numérico, y cuanto más alto mayor será el difuminado. Es habitual indicarlo en píxeles.
Código CSS de sombra de texto con desplazamiento:
.dif {
text-shadow: 2px 2px 3px #ff7f2a;
}
Resultado:
Texto con sombra desplazada y difuminada.
En este ejemplo se puede observar como la sombra se ha vuelto más borrosa. Si el valor de desenfoque se eleva demasiado, la sombra se difuminará tanto que será prácticamente inapreciable.
Color
El último parámetro de la propiedad CSS text-shadow es el color, y al igual que el anterior también se trata de un parámetro opcional. Su valor por defecto es el negro (#000000). Los colores se pueden indicar a través de una de las 140 palabras clave o haciendo uso de los modelos de color RGB y HSL.
Código CSS de sombra de texto con desplazamiento:
.col {
text-shadow: 0 0 10px red;
}
Resultado:
Texto con sombra centrada, difuminada y de color rojo.
Múltiples sombras
Al igual que ocurre con la propiedad para proyectar sombras en cajas de elementos (box-shadow), con text-shadow también se puede añadir varias sombras de texto a la vez, separadas por coma. El orden “Z” de las múltiples capas de sombra viene definido según el orden de declaración, es decir, que las primeras sombras se verán por encima de las últimas que se haya especificado.
Código CSS de múltiples sombras de texto:
.multiple {
text-shadow:
0 4px 8px red,
0 -4px 8px blue;
}
Resultado:
Texto con sombra de dos colores: azul y rojo.
En este ejemplo se define dos sombras con un desenfoque de 8 píxeles. La primera es roja y queda ubicada 4 píxeles por debajo del texto, mientras que la segunda es azul y queda desplazada 4 píxeles por encima.
