Ya hemos hablado anteriormente sobre las propiedades de las fuentes en CSS3 o los media queries. Hoy voy a hacer una breve introducción a las propiedades del texto en CSS3.
Como ya sabemos, CSS3 aporta muchas novedades sobre todo en lo que a transparencias, sombras, gráficos y transiciones se refiere. Una de ellas es la capacidad de cualquier texto de proyectar una sombra (o varias) de cualquier color hacia cualquier dirección y con cualquier difuminado.
Esto se consigue con la propiedad text-shadow que está soportada por Firefox >= 1.9, Safari >= 1.1, Chrome/Chromium >= 2, Opera >= 10. Ni IE9 ni IE10 soportan aún la propiedad text-shadow por lo que para el navegador de Microsoft habrá que recurrir a los ya acostumbrados hacks.
Introducción
La propiedad fue inicialmente introducida en la definición de CSS2 en 1998, pero ningún navegador la implementó (IE, Netscape) por lo que fue eliminada en CSS2.1 y ha vuelto a ser introducida en la nueva especificación CSS3
Como ya he dicho anteriormente, la propiedad text-shadow nos permite que cualquier texto arbitrario proyecte una sombra detrás de él. Esto tiene múltiples utilidades, por ejemplo, si escribimos texto sobre una imagen de fondo que tiene mucho contraste u una conjunción de colores elevada, es posible que no seamos capaces de leer el texto con claridad. La nueva propiedad nos ofrece una forma sencilla y elegante de solventar ese problema.
Un ejemplo sencillo puede ser el de proyectar una sombra negra con al menos 2px de desplazamiento lateral y vertical positivo y un difuminado de 5px para crear un efecto de relieve en texto blanco sobre fondo blanco.
.relieve {
text-shadow: black 2px 2px 5px;
}Una de las cosas que más juego dan es que la sombra puede especificar un difuminado como cuarto parámetro. Cuando utilizamos un valor de difuminado superior a 0px la sombra se renderiza como si no tuviera bordes serrados y se confunde con el fondo dando un aspecto elegante.
Los navegadores hacen uso extensivo de ciclos de la CPU para difuminar el texto. Cuanto mayor sea el valor del difuminado, mayor será el gasto de CPU. Esto no es un problema para títulos y cabeceras, pero para textos muy largos puede entorpecer la carga del navegador y convertirse en un gasto de recursos intolerable.
.difuminado {
text-shadow: green 0px 0px 20px;
}Sombras múltiples
La propiedad text-shadow puede admitir múltiples sombras en la misma definición. Esto se usa mucho para incrustar texto sobre fondos lisos o con alguna textura en mosaico.
.incrustado {
text-shadow: green -1px -2px 0.5em, red 2px 3px 2px;
}Emular text-shadow en IE
Como siempre, IE nos obliga a escribir código CSS no estándar que hará que nuestras hojas de estilo no validen pero que es totalmente necesario si queremos utilizar text-shadow en ese navegador.
Internet Explorer pone a nuestra disposición dos de sus filtros propietarios bastante limitados pero que pueden hacer el apaño con el navegador de los de redmond.
filter: glow(color=green,strength=3);
filter: dropshadow(color=green,offX=2,offY=2);También puede utilizarse la familia de filtros DXImageTransform.Microsoft.Shadow o mucho mejor DXImageTransform.Microsoft.Glow y DXImageTransform.Microsoft.blur
Efecto incrustado
Podemos emular texto incrustado en fondos con textura o fondos lisos aplicando una sombra con contraste sobre el fondo en cuestión.
.slogan {
font-size: 56px;
line-height: 0.8;
margin: 0;
text-shadow: 1px 1px 0px #c4d014;
}Conclusión
La propiedad text-shadow es bastante potente y puede servir para mejorar el aspecto de nuestros sitios web, pero como todo, hay que usarlo con cabeza y no abusar de este efecto por que podemos crear páginas sobrecargadas casi ilegibles y que consuman muchos ciclos de CPU.
NOTA: No he probado los filtros para IE explorer de estos ejemplos por que no dispongo de una máquina con Windows ni IE a mano, los filtros los he sacado de la página de Microsoft así que supongo que funcionarán, en caso contrario agradezco un feedback. Gracias.
Más en Genbeta Dev | Introducción a CSS3
