Textos con gradiente usando CSS

Aquí tienes un sencillo truco css que te muestra como crear efectos de texto con gradiente a traves de una imagen PNG, puro css, sin javascript ni flash.

¿Quieres crear fantasticos encabezados sin tener que exportar cada vez como imagen a través de Photoshop, Fireworks o el programa de diseño que utilices? Aquí tienes un sencillo truco css que te muestra como crear efectos de texto con gradiente a traves de una imagen PNG (puro css, sin javascript ni flash).

Todo lo que necesitas es un tag vacío de en el encabezado y aplicar la imagen de fondo superpuesta usando la propiedad position:absolute de css.
Este truco ha sido testeado en la mayoria de navegadores: Firefox, Safari, Opera… Incluso en Internet Explorer 6.

Beneficios de utilizar este método en lugar de imágenes:

• Utilizamos solamente css, nada de javascript o flash. Funciona en la mayoría de los navegadores, incluyendo IE6 (para el que necesitaremos usar un hack).
• Es perfecto para diseñar encabezados. No necesitarás crear una imagen para cada encabezado con tu programa de diseño. Te ahorrará tiempo y ancho de banda.
• Lo puedes usar con cualquier fuente y el tamaño de la fuente permanece escalable.

¿Cómo funciona?

El truco es muy sencillo. Básicamente sólo tenemos que añadir un gradiente PNG de 1px (con transparencia alpha) sobre el texto.

Las etiquetas HTML:

Texto con gradiente css

El código css:

El punto clave esta aquí: h1 {position: relative} y h1 span {position absolute}

h1 {
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
}

h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

Y esto es todo! Puedes ver varios ejemplos en la web del artículo: ejemplos

Como hacer que funcione en IE6

IE6 no es capaz de interpretar bien las propiedades de los PNGs transparentes. Necesitamos el siguiente hack para que muestre correctamente la transparencia:

h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
}

Desventajas

• Este truco solo conviene usarlo con elementos con un color de fondo sólido. El color del gradiente (imagen png) de ser el mismo que el color de fondo del elemento.
• Se necesita un hack para poder aplicar la transparencia del gradiente en IE6.
• Si la imagen de gradiente es mas alta que el encabezado el texto no será seleccionable.