Web de Roxana Falasco

Crea fácilmente un efecto de gradiente sobre un encabezado utilizando sólo CSS, sin necesidad de JavaScript o creando el texto como imagen. Hoy por casualidad me encontré este truco CSS que desconocía, me pareció muy interesante compartirlo con vosotros.

El truco es muy sencillo, sólo necesitas una etiqueta <span></span> en el encabezado, un par de clases y una imagen png de 1px con transparencia alpha.

Pasos:

• Crea una imagen (con GIMP por ejemplo) PNG de 1px con transparencia alpha.
• Crea las siguientes dos clases:
  
h1 {
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
}

h1 span {
background: url(gradiente.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}
• Por último, añade el siguiente código en el body:
  <h1><span></span>Texto con gradiente css</h1>

Por desgracia IE6 no interpreta correctamente los PNGs transparentes, por lo que habrá que utilizar el siguiente hack, introducido en un comentario modal:
<!--[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
}
</style>
<![endif]–>

En la web del autor puedes ver varios ejemplos.

Technorati Tags: css, css tips