Efecto degradado de texto con CSS
14-02-2008 Tutoriales 8622 hits (75.45 %) 3 comentariosPodemos generar agradables estílos visuales sin la necesidad del Photoshop! Aquí un simple truco CSS para mostrate como crear el efecto gradiente en textos con una imágen PNG. Tal como lo estas leyendo, sin Javascript ó Flash. Todo lo que necesitas es una etiqueta vacia <span> en las de cabecera y superponer (overlay) la imagen de fondo usando la propiedad position:absolute. Este truco ha sido probado en muchos navegadores: Firefox, Safari, Opera e incluso en IE6.
Cómo trabaja
El truco es bien simple. Basicamente es agregar una imagen PNG de 1px con transparencia alpha sobre el texto.El HTML quedaría así:
<h1><span></span>Texto gradiente con CSS</h1>El CSS con lo básico:
h1 {position: relative}
h1 span{position: absolute}Que simple verdad! Ve aquí unos ejemplos. ¿Y en IE6 funciona? Ve el artículo completo en inglés donde explica cómo.
El siguiente es un ejemplo mío, el PNG transparente puedes obtener de aquí.
<html>
<head>
<title>Ejemplo Gradiente</title>
<style type="text/css">
body {
font: 75%/160% Arial, Helvetica, sans-serif;
width: 700px;
margin: 20px auto;
}
.gradient1 h1 {
font: bold 330%/100% "Lucida Grande", Arial, sans-serif;
position: relative;
margin: 30px 0 50px;
color:#990000;
}
.gradient1 h1 span {
background: url(gradient-white.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}
</style>
</head>
<body>
<div class="gradient1">
<h1><span></span>RIBOSOMATIC</h1>
</div>
</body>
</html>
Jesus Liñan
se agradece