Texto Css3
Hojas de estilo para la Web
Trucos y sugerencias para CSS
Texto con sombra
Texto con sombra borrosa
Texto blanco legible
Varias sombrasContornos
Brillo de neón
-------------------------------------------------
TEXTO CON SOMBRA
El CSS nivel 3 tiene una propiedad llamada "text-shadow" que permite añadir una sombra a cada letra de untexto. 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óncon el texto normal. El resultado se ve así:
(En agosto de 2005, no todos los navegadores son totalmente compatibles con la propiedad "text-shadow". El ejemplo anterior debería funcionar al menos enSafari y Konqueror).
-------------------------------------------------
TEXTO CON SOMBRA BORROSA
La forma más sencilla de la propiedad "text-shadow" tiene dos partes: un color (como #333 en elejemplo 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 seaimpreciso, 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 conmucha 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 quesigue 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...
Regístrate para leer el documento completo.