Gradient CSS

Y las vueltas que le he dado hasta encontrar la "pega"...
Y es que el artículo de Xyberneticos está incompleto: ofrece su CSS, el HTML del gradient y una corrección para IE6.

Pero así no me funcionaba, hasta que decidí ir a la página fuente del artículo Webdesignerwall, donde se muestra un download... y ahí ya me figuré que habría imágenes.

Efectivamente: todos los gradientes están hechos a base de imágenes... he tardado un congo en descargármelas todas, con resultados diversos: la mayoría se ven bien, salvo por el glossy link, que no lo veo por ningna parte; el gradient con query, que me mandaba a la porra la mitad de los hacks de este blog, de forma que paso...; y el Zebra, que se me ha quedado corto para la segunda palabra del ejemplo (con un content-Wrapper más ancho quedaba arreglado... pero no tengo ganas de ponerme a mover la plantilla sólo por la segunda palabra de un gradient).

Y se me ocurre que lo mismo vale para títulos en h1 que en cualquier otro, p.e. h2, que son los que suelen utilizar las plantillas de blogger.

En cuanto al código, ya digo que son un CSS que me he descargado y al que he añadido las correspondientes imágenes; un script query para el caso; y una corrección para que el gradient duncione en IE6...

Aparco el CSS para cuando tenga tiempo... en Epílogo.

CSS Gradient Text

How about Georgia?

Black Glossy Link

Dark on Light Sample

Metallic shine

Doesn't this look cooler than Web 2.0?

Hello, I'm Shinely

Vertical Stripe

Horizontal Stripe

Wow, Zebra

It works on IE6 too!

Note: only this sample has applied IE6 PNG hack

jQuery prepend version

Note: in this sample the <span> tag is prepended by jQuery (it is not in the source code).

iPhone again?

Here is another sample intro banner

Apply on real design

See, it is very practical. Try it on your design today. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc euismod adipiscing magna. Quisque sollicitudin nisi a nisi feugiat suscipit. Praesent molestie. Curabitur laoreet, augue in pharetra adipiscing, ipsum lectus blandit leo, quis viverra odio purus eget lectus. Cras vitae libero. Duis sed pede id erat laoreet varius. Ut felis est, aliquet ut, dictum at, consectetuer sed, ante.

Another heading

Mauris aliquam leo at pede pharetra condimentum. Ut arcu mauris, blandit at, porttitor vel, scelerisque vitae, nunc. Vivamus consequat tellus. Vivamus sed magna ut urna dictum ultrices. Curabitur at libero molestie eros imperdiet semper. Maecenas eu est non nunc gravida laoreet. Vestibulum orci. Donec bibendum neque a dui.