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