Es interesante como las tecnologias avanzan dia con dia, recuerdan esas paginas antiguas. Que utilizaban muy poco interactividad con el usuario y las imagenes eran increiblemente sencillas. Pues CSS3, de nuevo a sorprendernos y demostrarnos que el desarrollo de un sitio cada ves sera mas sencillo. Hoy les mostrare la forma de como hacer un gradiente facil y rapido, sin la tediosa necesidad de abrirse -llamese photoshop, illustrador, etc- un software para crearnos nuestra imagen.

Asi es como se aplica (dependiendo el standar)

W3C

linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

Mozilla firefox:

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

-moz-radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

Webkit (Safari y chrome)

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

- DEMO

Comparte este Goo:

¿Tiene contenido inapropiado?

Comparte este goo con un amigo: