sábado, 16 de julio de 2011

Ponerle sombra al texto de un blog

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.

h3 {color: white} h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

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} 

No hay comentarios:

Publicar un comentario en la entrada