Vamos a ver unos cuando efectos que conseguiremos con las CSS en los textos. Con estos efectos podremos evitar utilizar imágenes para conseguir pequeñas sombras o contornos
- Texto con sombra
- Texto con sombra borrosa
- Texto blanco legible
- Varias sombras
- Contornos
- Brillo de neón
Resumen del Contenido
Texto con sombra
El CSS nivel 3 tiene una propiedad llamada «text-shadow» que permite añadir una sombra a cada letra de un texto. En su forma más simple, es más o menos así:
h3 {text-shadow: 0.1em 0.1em #333}
Esto añade una sombra gris oscuro (#333) un poco a la derecha (0.1em) y abajo (0.1em) en relación con el texto normal. El resultado se ve así.
Otro ejemplo puede ser el siguiente:
h1.test {text-shadow: #6374AB 20px -12px 2px;}
El color: Le hemos dado un color a la sombra: “#6374AB”.
La coordenada x de la sombra relativa al texto: 20 píxeles. La coordenada y de la sombra relativa al texto: -12 píxeles.
Lo disperso que se encuentra la sombra (2px). Si aumentamos mucho este valor, la sombra será ilegible.
Texto con sombra borrosa
La forma más sencilla de la propiedad «text-shadow» tiene dos partes: un color (como #333 en el ejemplo anterior) y un desplazamiento (0.1em 0.1em en el ejemplo anterior). El resultado es una sombra nítida con el desplazamiento indicado. Pero también puede hacerse que el desplazamiento sea impreciso, lo que da por resultado una sombra más o menos borrosa.
La cantidad de imprecisión se da como otro desplazamiento. Aquí se muestran dos líneas, una con un poco de imprecisión (0.05em) y la otra con mucha imprecisión (0.2em):
h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}
Texto blanco legible
El uso de sombras puede hacer más legible el texto cuanto hay poco contraste entre el primer plano y el fondo. Lo que sigue es un ejemplo de texto blanco contra fondo azul pálido, primero sin sombra y luego con ella:
h3 {color: white}
h3.a {
color: white;
text-shadow: black 0.1em 0.1em 0.2em}
Varias sombras
También es posible poner más de una sombra. En general, el resultado es un tanto extraño:
h3 {text-shadow: 0.2em 0.5em 0.1em #600,
-0.3em 0.1em 0.1em #060,
0.4em -0.3em 0.1em #006}
Pero colocando acertadamente dos sombras, una oscura y la otra clara, el efecto puede ser útil:
h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #333}
Esto es un poco peligroso, como podrá apreciar si tu navegador no admite la propiedad «text-shadow». De hecho, en este ejemplo los colores del fondo y del texto son casi iguales (#CCCCCC y #D1D1D1), de modo que sin las sombras apenas existe algún contraste.
Trazar letras como contornos
El ejemplo con dos sombras de la versión previa se puede llevar todavía más allá. Con cuatro sombras, es posible dar a las letras un contorno:
h3 {text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black}
No es un contorno perfecto, prueba en varios navegadores para ver el resultado
Brillo de neón
Si se pone una sombra borrosa justo detrás del texto, es decir, con desplazamiento igual a cero, el efecto es un resplandor alrededor de las letras. Si el resplador de una sola sombra no es suficientemente intenso, basta repetir la misma sombra unas pocas veces:
h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
0 0 0.2em #87F}
