Seguramente recordaran este articulo Adornar nuestros títulos con CSS que escribimos hace meses atrás, una técnica muy sencilla que nos permitía mediante CSS hacer que nuestros títulos obtengan un estilo desgastado o degrade utilizando una imagen Gif en position: absolute y una etiqueta vacía < span >. Webdesignerwall me vuelve a recordar ese post, y si bien la técnica es prácticamente similar, aquí se utilizara una imagen PNG para crear textos con efecto gradientes, algo que será muy bueno, ya que estos degradados serán sin duda de mayor calidad, y lo mejor aun, es que se corregirán los errores que Internet Explorer nos pueda generar con este formato de imagen.
Todo lo que se necesitara es una etiqueta < span > vacía en el titulo, como hicimos anteriormente, y a la imagen de fondo aplicarle la superposición mediante css, lo que seria position: absolute para que flote sobre nuestro titulo.
Ver Ejemplos – Descarga demos
USO:
Añadimos las etiquetas vacías
HTML:
<h1><span></span> Titulo de Post</h1>
Y nuestro CSS:
CSS:
h1 {
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
}
h1 span {
background: url(gradiente.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}
Como IE6 no soporta correctamente las transparencias de los PNG-24 necesitaremos corregirlo, entonces añadimos el siguiente código dentro de la etiqueta < head > … < /head >
CSS:
<!–[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘gradient.png’, sizingMethod=‘scale’);
}
</style>
<![endif]–>
