CSS

CSS: Textos con sombra, contornos, …

20 febrero, 2011

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

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í.

Ver ejemplo

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}

Ver ejemplo

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}

Ver ejemplo

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}

Ver ejemplo

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}

Ver ejemplo

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}

Ver ejemplo

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}

Ver ejemplo

También podría gustarte