Gradientes con CSS 3

22/nov/2010 7

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.

Comentarios

  1. Naxo [#]

    Buuuu no esta Opera que es el buscaba

  2. Jorge Epuñan [#]

    Opera 10 aun no soporta gradientes en CSS3, lo q se hace es utilizar una imagen y escalarla al 100% del viewport; es muy engorroso. Mira el sgte articulo y ejemplo.

    Salu2.

  3. Rafael [#]

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

    bueno, es lo mas cercano que podras conseguir sin imagenes

  4. más que HTML [#]

    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/

  5. Acumuladores hidraulicos [#]

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

  6. inyaka [#]

    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

  7. Fabio [#]

    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!

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab