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

Dando estilos a placeholder

Con HTML5 llegaron muchas nuevas etiquetas y atributos, y se nota que en la W3C se esforzaron en la captura de datos. Los formularios tuvieron muchas mejoras y en este artículo mostraré como manipular un útil atributo: placeholder. Placeholder permite integrar un texto predefinido dentro de un campo de texto (<input>). En general este texto [...]

jQuery Timelinr

jQuery Timelinr

This simple plugin helps you to give more life to the boring timelines. Supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc.

Lo ví y me gustó 28

#28 – 22 Agosto 2008

  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
Cargando