Alejandra 9 de mayo de 2008 a las 12.15

CSS: Efecto de texto con gradiente

Diseño, CSS, html, tutorial, efecto, jQuery, texto, fuente, gradiente, markup

¿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

Comentarios (2)

Victor dice:
Lunes, 12 de mayo de 2008 a las 11.36
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
Javi dice:
Jueves, 16 de julio de 2009 a las 13.27
como se hace lo del gradiente alfa?

D	L	M	X	J	V	S
« oct
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31