CSSLab

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.