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.

Texto_con_gradiente_css

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: ,

Guarda este post o compártelo: Si te a gustado este post guárdalo y/o compártelo en tu red social.
  • Facebook
  • MisterWong
  • Technorati
  • Google
  • bodytext
  • del.icio.us
  • StumbleUpon
  • BlinkList
  • Reddit
  • YahooMyWeb
  • Live
  • TwitThis
  • Wikio
  • Meneame