Alejandra 9 de mayo de 2008 a las 12.15
   Imprimir artículo
elWebmaster.com

CSS: Efecto de texto con gradiente


Efecto de texto con gradiente驴Quieres lograr buenos encabezados sin usar im谩genes de Photoshop? Aqu铆 te mostramos un simple truco de CSS para que sepas c贸mo crear el efecto de texto con gradiente con una imagen PNG (puro CSS, sin JavaScript o Flash).

Todo lo que necesitas es un tag vac铆o en el encabezado y aplicarle un overlay a la imagen de fondo usando la propiedad CSS position:absolute. Este truco ha sido testeado en la mayor铆a de los buscadores: Firefox, Internet Explorer 6, Safari y Opera. Sigue leyendo para saber c贸mo hacer…

Beneficios

  • Es un truco puramente CSS, sin usar JavaScript ni Flash. Funciona en la mayor铆a de los navegadores incluyendo IE6 (ver Haciendo que funcione en IE6).
  • Es perfecto para dise帽ar encabezados. No necesitas renderizar cada encabezado con Photoshop. Te har谩 ahorrar tiempo y tiempo de carga del sitio.
  • Puedes utilizarlo con cualquier fuente web y a煤n cambiando el tama帽o de la fuente, el efecto permanecer谩 intacto.

驴C贸mo funciona?

El truco es muy simple. B谩sicamente agregamos un gradiente PNG de 1px (con transparencia alfa) sobre el texto.

agregamos un gradiente PNG de 1px

Markups de HTML

<h1><span></span>CSS Gradient Text</h1>

El CSS

El punto clave aqu铆 es: 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 ya est谩! Terminaste. Haz clic aqu铆 para ver el demo.

Texto en gradiente

Haciendo que funcione en IE6

Como IE6 no renderiza bien los PNG-24, es necesario hacer lo siguiente para conseguir la transparencia del PNG (debes agregarlo en alg煤n lado dentro del tag ):

<!–[if lt IE 7]>

<style>

h1 span {

background: none;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);

}

</style>

<![endif]–>


jQuery, versi贸n prepend (para los chicos sem谩nticos)

Si no quieres tener un tag vac铆o en el encabezado, puedes usar JavaScript para anteponer el tag . Aqu铆 hay un ejemplo usando el m茅todo prepend de jQuery:

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

//prepend span tag to H1

$(“h1″).prepend(“<span></span>”);

});

</script>

Patr贸n/Textura

Puedes usar este truco con otro tipo de fondo. Aqu铆, un ejemplo con patr贸n de cebra:

Gradiente de cebra

Limitaciones

  • Este truco se puede hacer 煤nicamente en elementos con color de fondo s贸lido. Tu gradiente de color (la imgen PNG) debe tener el mismo color que fondo.
  • Tendr谩s que usar el hack de PNG para que funcione en IE6.
  • Si tu imagen de gradiente es m谩s alta que el encabezado, el texto quedar谩 como no seleccionable.

Fuente: WebDesignerWall


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. Victor dice:

    Muy interesante, pero el efecto conseguido no se parece a la imagen que se muestra en primera instancia (CSS con fondo rojo en la parte superior de esta pagina).

    Me parece buena la tecnica :)

  2. Javi dice:

    como se hace lo del gradiente alfa?

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder