-->
Ir a Epílogo
close

AVISOS:

SOBRE NAVEGADORES

Regresar a EpílogoEste sitio, lo mismo que mis otros blogs, se ven mejor con los navegadores más recientes.
Especialmente Firefox, que es el que uso.

¡¡NO FUNCIONA CON IE6!!! (creo...)

FirefoxInternet Explorer 7SafariOperaCaminoKonqueror



Top Panel
sábado, 19 de enero de 2008

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?








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.



0 comentarios:

 
Sir John Tenniel"s illustrations
ALICE"S ADVENTURES IN WONDERLAND
sketch 01
sketch 02
sketch 03
sketch 04
sketch 05
sketch 06
sketch 07
sketch 08
sketch 09
sketch 10
sketch 11
sketch 12
sketch 13
sketch 14
sketch 15
sketch 16