Degradados con CSS 3

Por suerte, dentro de poco, el uso de imágenes en degradados habrá pasado a la historia, ya que CSS 3 dispone de un potente mecanismo para producirlos que resulta todavía más versátil que el propio uso de imágenes de fondo. En este artículo introduciremos el uso de degradados en páginas web, aportando un par de ejemplos.

Los degradados implementan un gradiente de color, que pasa de un estado a otro a lo largo del fondo de los elementos HTML, ya sea capas, elementos de listas, botones, etc. Dichos degradados se obtendrán por medio de la especificación de una serie de características, como la posición inicial, la dirección hacia donde se realizará, si es circular o linear, y los colores que se incorporarán en cada uno de los pasos del gradiente.

El navegador es el encargado de renderizar el degradado en función de las características escritas para definirlo. Podemos asignar degradados como fondo en cualquier elemento HTML donde se podía implementar una imagen de fondo.

La especificación que se baraja actualmente incluyen degradados de dos tipos principales:

Degradados lineares:
En los que se crea un gradiente que va de un color a otro de manera lineal. Puede ser de arriba a abajo, de izquierda a derecha y viceversa. Incluso se puede conseguir un degradado en un gradiente de una línea con cualquier ángulo.

Los degradados lineares se consiguen con el atributo background asignándole el gradiente con la propiedad "linear-gradient" de CSS 3. Un ejemplo puede verse a continuación:

div{
   height: 130px;
   width: 630px;
   background: -webkit-linear-gradient(orange, pink);
   background: -moz-linear-gradient(orange, pink);
   background: -o-linear-gradient(orange, pink);
}

Degradados circulares:
En ellos se implementa un gradiente que se distribuye radialmente, desde un punto del elemento hacia fuera, de manera circular, que puede tener el mismo valor de radio (para hacer degradados en círculos perfectos) o con valores de radio variables (lo que generaría elipses).

El valor que asignamos a background en este caso será por medio del atributo "radial-gradient", además de toda la serie de parámetros necesarios para definir el degradado según nuestras intenciones.

div.circular{
   background: -webkit-radial-gradient(#0f0, #06f);
   background: -moz-radial-gradient(#0f0, #06f);
   border: 1px solid #333;
   height: 200px;
   width: 250px;
}

Puedes ver estos dos degradados, si utilizas Firefox, Opera, Safari o Chrome, en una página aparte.

Conclusión

Para asegurarse que un degradado funciona en la mayoría de las plataformas, de momento estamos obligados a escribir las reglas de estilos con etiquetas propietarias para cada navegador y más adelante podremos escribirlos sólo con la etiqueta definitiva.

Osea, para definir un degradado deberíamos escribir todos estos estilos:

background: -webkit-linear-gradient(orange, pink);
background: -moz-linear-gradient(orange, pink);
background: -o-linear-gradient(orange, pink);
background: linear-gradient(orange, pink);

El primero para Webkit, segundo para Firefox, tercero para Opera y el último sería el atributo que se espera que sea definitivo, que lo podemos ir colocando para cuando Internet Explorer empiece a soportar los degradados CSS o para cuando los navegadores ya entiendan la etiqueta definitiva.

Por tanto, cuando CSS 3 se convierta en un estándar de implementación recomendada, podremos únicamente dejar la etiqueta del gradiente definitiva, linear-gradient y borrar todas las demás definiciones de estilos:

background: linear-gradient(orange, pink);

Aunque en este artículo hemos visto una simple introducción a los degradados CSS 3, el borrador actual del W3C incluye muchas otras cosas que servirán para hacer degradados bastante más complejos y configurables por infinidad de parámetros. No obstante, de momento lo dejamos por aquí y veremos más sobre este asunto ya cuando expliquemos el detalle de los degradados lineares y los degradados radiales.