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

Reflejo horizontal y vertical con CSS3

Reflejo horizontal y vertical con CSS3

Me entretengo mucho inventando proyectos donde pueda aplicar CSS3 a destajo sin importarme un carajo las limitaciones de los browsers. Buscando una solución elegante para aplicar el mismo efecto reflejo que tan fácil es hacer en Photoshop, pero con CSS3, lo que quería realizar era el reflejo de un elemento HTML; no un transform: rotate(180deg); [...]

Lo ví y me gustó 33

#33 – 17 Diciembre 2009

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
Cargando