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
Iniciar sesión