JMiur [E]

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>
Algunos ejemplos utilizando diferentes imágenes:

Título degradado con CSS


Título degradado con CSS


Título degradado con CSS


Título degradado con CSS

19 comentarios:

Edward Yanquen  

no se si sea un problema de mi navegador pero los textos no se visualizan bien....

e ultima lo intenta pero se ve patetico, utilizo firefox...

Responder
solserpiente  

Hay otra opción para que los png con transparencias se vean en IE6 (maldito ie6, grrr). Utilizar javascript. A mí siempre me ha ido bien, sobre todo si el png es una imagen que hay que insertar y no una imagen de fondo. Aunque claro, en este caso tendrías el mismo problema que planteas, tendrías que insertar en el head el siguiente código:

<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

para que sólo ie6 leyera el javascript.

en este enlace se puede descargar el javascript

Responder
JMiur  

edward:

No sé lo que ves pero deberías ver esto: CAPTURA.

solserpiente:

Adhiero al grrrr :D

He visto muchos scripts diferentes, ninguno ha funcionado hasta ahora en el 100% de los casos, probaré le que me recomiendas.

Responder
Quique  

Buenas!

Tengo una preguntita que igual me puedes solucionar. Siento que no este en relacion con este post en concreto:

Se trata de que google indexa todas mis entradas con el titulo del blog en lugar de indexarlas con el titulo del post:
si se mira en google:

site:www.viajablog.com

aparecen todos los links con el titulo del blog: Viaja Blog o Viaja Blog: Ideas y consejos sobre el mundo viajero (recien cambiado)

Lo ideal seria que aparecian con el titulo del post. Sabes que es lo que falla?

Gracias!

Responder
JMiur  

No es una falla, es la forma en que los muestra Blogger.

Puede llegar a cambiarse y si aún no lo he hecho es de puro perezoso.

Dame un par de días y escribo el código necesario en un post porque es un poco largo para un comentario.

Responder
La Blogueria  

Gracias por la explicación, y gracias también a solserpiente por el dato, voy a probar también.

¡Espero ese próximo post! ¡Saludos!

Responder
JMiur  

Gracias a ti y .... lo confieso: he hurtado otra lechuza :$

Responder
Fernandooo1  

[drama]OMFG!!

Ese es el SPAM más obvio de todo el mundo XD![/drama]

¿No se cansan?

....

¡Saludos!

Responder
JMiur  

Y este, es el post del spam ¿por qué todos caen acá?

En fin, lo he borrado porque solo eran una pila de enlaces de wow gold wow power leveling World of Warcraft Gold Rolex Replica rolex 租房 北京租房 firmado por ul tal changyongkuivip

Gracias, changyongkuivip, un abrazo y ojalá te %66$$$98//$$#=??kK ... besos.

Responder
ls  

¿Por qué caemos todos acá? ¿Por viciosxs? :p

Responder
CaTa  

Xuta , ¿Por viciosxs? ehmmm, ¿qué será eso? lo primero que creí entender es Vicios sexuales, noooo creooo, será eso?? :P, si es asi, ¡¡protesto!! ¿donde está mi parte? ah?? :D

Responder
ls  

Nooooo, CaTA, nooooooo. El tío JMiur protege de esas cosas chanchas y enfermitas.

(¿Te presento a mi cuñado o no? Ama a los gatitos, te lo juro. ;P )

Responder
JMiur  

Y justo el spam de hoy era ....

wedding dresses; wedding gowns; bridal gowns
wedding invitations; bridal shower invitations
cheap wedding invitations; unique wedding invitations
baby shower invitations

:D

Responder
Cristian  

Una pregunta: No se puede hacer nada más que con colores el efecto?

Responder
JMiur  

El efecto es producido por una imagen así que cualquier imagen sirve.

Responder
HaCk CrAcK  

Hola Jmiur, yo puse este codigo en la plantilla, pero al guardar me modifica <span></span> por <span/> y asi no me funciona el degradado :( ¿Alguna solucion?

Responder
JMiur  

&lt:span>&lt:/span> y &lt:span/> es exáctamente lo mismo.

Si te fijas en el código fuente del post, verás que también dice &lt:span/> así que el problema está en otro lado.

Responder
MUJERESMADRES LIBRES  

Hola
Acabo de abrir un blog y no consigo cómo hacer para que las entradas que publico se mantengan en un orden lógico, es decir, quiero que la primera entrada que se lea en el blog sea la última publicada y no la primera. Gracias!

Responder
JMiur  

Tu blog se ve bien, con las entradas ordenadas cronólogicamente comenzando por la última publicada.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR