Textos degradados con CSS

En Web Designer Wall muestran un truco sencillo para crear títulos o encabezados con degradados, utilizando sólo CSS.

Si bien el truco es sencillo, hacer que funcione en cualquier navegador no lo es, a menos que utilicemos el hack para Internet Explorer que ellos proponen pero, esto obliga a definir los códigos en el encabezado de la plantilla y, como sólo pretendo hacer una demostración, no es una solución que me convenciera demasiado.

Vamos a la explicación elemental.

Todo se limita a anteponer una etiqueta <span> vacía dentro del título y aprovechando la propiedad position: absolute, superponer una imagen con el degradado.

Por ejemplo:

<h1><span></span> el texto a mostrar </h1>

Pero claro, debemos definir previamente las propiedades:

<style>h1 {
position: relative; /* obligatorio */
color: #464646;
font: bold 330%/100% "Lucida Grande";
}
h1 span {
display: block; /* obligatorio */
position: absolute; /* obligatorio */
width: 100%; /* obligatorio */
background: url(URL_imagen.png) repeat-x;
height: 30px;
}
</style>

Aquí, URL_imagen.png es la imagen que vamos a utilizar y salvo las propiedades obligatorias, el resto es personalizable.

El problema, claro, es el uso de imágenes PNG-24 transparentes para las gradientes, un tipo de imagen que (¿estamos en el 2008?) el bendito Internet Explorer no muestra correctamente en muchas de sus versiones (casualmente, las más utilizadas, 6 para abajo).

De allí que ellos proponen utilizar un hack que se agrega debajo de la definición de estilo anterior:

<!--[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='URL_imagen.png',
sizingMethod='scale');
}
</style>
<![endif]-->

Hasta aquí todo funciona perfectamente pero claro, ambas definiciones de estilo deben ir en el encabezado de la página, es decir, antes de </head>. Sin embargo, mi idea era mostrarlo y no integrarlo en la plantilla.

En principio, no hay problema, se coloca la definición de estilo en el post con la precaución de colocar todo en una sola línea y es suficiente pero ¿y el hack para IE? Eso no podemos ponerlo en un post, no funcionará de ninguna manera. El problema no es usar la propiedad filter, podría ponerse y los otros navegadores simplemente la ignorarían. El tema es que debemos colocar background: none. Es decir, para IE, no debe haber un fondo y para el resto si. Moraleja, o funciona en uno o funciona en otros.

Decidí recurrir a otro método. Me acordé de la definición que leí una vez: como IE es estúpido, aprovechemos su estupidez.

Si anteponemos un guión bajo a cualquier propiedad CSS, cualquier navegador "decente" la reconocerá como una propiedad "comentada" es decir, no la tendrá en cuenta ... IE no. Por ejemplo:

color: red;
_color: blue;

IE mostrará el texto en azul, todos los demás en rojo (supongo que pa'llevar la contra, nomás).

Así que ahora puedo establecer las propiedades para los diferentes ejemplos sin necesidad de modificar la plantilla y crear variaciones usando clases:

<style>
h1.degrademo {
font: bold 330%/100% "Lucida Grande";
position: relative;
text-align: center;
color: #E6D9C7;
}
h1.degrademo span {
height: 30px;
background: transparent url(http://.../gradiente.png) repeat-x;position: absolute;
display: block;
width: 100%;
_background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='http://.../gradiente.png', 
sizingMethod='scale');}
</style>

<h1 class="degrademo"><span></span> el texto </h1>