Gradientes con CSS 3

Muchas de las propiedades CSS3 han estado presentes en browsers Webkit como Safari y Chrome desde sus inicios; a medida que avancen han mejorado el soporte y no es diferente con el uso gradientes sólo con CSS. Desde la versión 3.6 se pueden utilizar con Firefox, y últimamente han tomado mucha fuerza en aplicativos web modernos.

¿Porqué utilizar gradientes en CSS en vez de imágenes?

  1. Es más flexible y mantenible
  2. Menos dependendias de programas y editores gráficos
  3. Menos consultas al servidor
  4. Es escalable

En este artículo abordaremos las maneras de escribir gradientes (lineales y radiales) para los principales navegadores modernos.

Según los estándares W3C, crear gradientes se compone de:

linear-gradient( [<punto> || <angulo>,]? <stop>, <stop> [, <stop>]* )
radial-gradient( [<posicion> || <angulo>,]? [<forma> || <tamaño>,]? <stop>, <stop>[, <stop>]* )

Para browsers Mozilla, se mantiene pero se agrega el prefijo -moz:

-moz-linear-gradient( [<punto> || <angulo>,]? <stop>, <stop> [, <stop>]* )
-moz-radial-gradient( [<posicion> || <angulo>,]? [<forma> || <tamaño>,]? <stop>, <stop>[, <stop>]* )

Y para Webkit, es bastante diferente:

-webkit-gradient(<tipo>, <punto> [, <radio>]?, <punto> [, <radio>]? [, <stop>]*)

Una lástima que tengamos que reescribir para cada uno diferentes propiedades para lograr el mismo efecto. Mejor veamos los ejemplos:

Gradiente Lineal

body{
  background-color:#ccc;
  background-image: -moz-linear-gradient(top, #333, #ccc);
  background-image: -webkit-gradient(linear, left top,left bottom, from(#333), to(#ccc));
  background-image: linear-gradient(top, #333, #ccc);
}

Ver Ejemplo

Gradiente Radial

body{
  background-color:#ccc;
  background-image: -moz-radial-gradient(center 45deg,circle cover, #ccc, #333);
  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#ccc), to(#333));
  background-image: radial-gradient(center 45deg,circle cover, #ccc, #333);
}

Ver Ejemplo

¿Y con Internet Explorer?

Ni lo pienses, siquiera en IE9 están soportados. Podrías lograrlo en esta última versión através de SVG, el cual es basado en vectores. SVG es un lenguaje de marcado basado en XML que descibre vectores, y el motor de HTML5 permite que SVG sea incrustado directamente en HTML. Definiendo el alto del documento SVG al 100%, tendremos una imagen que se escala cualquiera sea el alto del elemento, tal como lo haría una caja con gradientes en CSS3.

¿Muy complicado? También lo creo. Mejor prueba algún script como Modernizr ó CSS3 Pie, los que hacen que IE soporte CSS3 como deberían haberlo hecho con los estándares hace mucho tiempo ya.

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

Experimento: rotación oblícua con CSS3

Experimento: rotación oblícua con CSS3

Sólo quería probar cómo a partir de un elemento-caja, lograba girarlo 45º y rotarlo al mismo tiempo. No sé qué uso práctico pueda tener, pero dejo el código resumido para que lo estudien ya que no fue fácil (todo lo que sean sombras, gradientes lo pueden ver en el source del ejemplo final). El HTML [...]

Mejor renderizado para textos

Mejor renderizado para textos

Érase una vez una tímida propiedad CSS que pocos conocen y nadie usa, pero que es muy beneficiosa cuando tratamos con textos. Es conocido que cada plataforma -y cada browser- trata a las tipografías a su modo; es así como un font-size de una Arial no es similar no sólo dependiendo de la resolución ó [...]

bottom que no se va al bottom

Este es un fix corto y preciso. En browsers modernos (¡sí, tal como leíste esto no afecta IE6 ni IE7!) la propiedad background-position no funciona como uno espera. La condición dice: Si quieres poner una imagen como fondo del <body> y posicionarla abajo de la ventana del browser (background-position: bottom) y el contenido de tu [...]

  1. Buuuu no esta Opera que es el buscaba

    Naxo
    22 / Noviembre / 2010

  2. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#B9D015′, endColorstr=’#95A811′);

    bueno, es lo mas cercano que podras conseguir sin imagenes

    Rafael
    22 / Noviembre / 2010

  3. En realidad Internet Explorer (a partir de la versión 5.5) sí permite degradados, con dos limitaciones principales:

    - Sólo se pueden hacer degradados lineares en horizontal o vertical (con el parámetro GradientType).

    - No permite detener el degradado a una distancia determinada, es decir, el degradado se ajusta al tamaño del elemento al que se le aplica.

    Por si os resulta de utilidad, hace unos meses publiqué una entrada más detallada sobre este tema:

    http://masquehtml.com/degradados-lineares-sin-imagenes/

    más que HTML
    24 / Noviembre / 2010

  4. Interesante tema, gracias por la información sigan publicando.

    Acumuladores hidraulicos
    07 / Marzo / 2011

  5. buen articulo, siempre encuentro cosas interesantes en este blog.
    IE es el eterno enemigo, a pesar de que a mejorado, es un terrible lastre que carga la web, afortunadamente ha perdido mucho mercado gracias a los desarrolladores webs que somos su peor anti publicidad

    inyaka
    12 / Agosto / 2011

  6. Jesús. Quién ha redactado la entrada, un estudiante gringo, un borracho? El contenido está muy bien, pero ¡por favor, aprendan a hablar español primero!

    Fabio
    03 / Abril / 2012

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

compartido 22 veces