Gradientes en CSS

Otra de las nuevas características del CSS3 es la que nos permite crear gradientes de color para utilizar como fondos. Como todas las otras, hay diferentes instrucciones dependiendo del navegador:

• en Firefox 3.6 usamos -moz-linear-gradient y -moz-radial-gradient
• en Google Crome y Safari -webkit-gradient linear y radial
• en Internet Explorer filter: progid:DXImageTransform.Microsoft.Gradient más información
• en Opera no está implementada

La mayor parte de los ejemplos siguientes sólo se verán Firefox porque resulta complejo aplicar todas las propiedades en esta entrada.

Las utilizamos como si fueran un color dentro de la propiedad background y las explicaciones de cada parámetro son bastante complicadas aunque puede intentarse de manera instintiva y ver qué ocurre:

-moz-linear-gradient(inicio angulo, color1, color2);
-moz-radial-gradient(inicio angulo, shape, color1, color2);

inicio es la posición desde donde comenzará a ser generada; pueden ser valores expresdos en pixeles, porcentajes o palabras clave como left, top, right, bottom o center.
angulo obviamente, indica el ángulo del gradiente
shape puede ser circle o ellipse y define la forma de una gradiente

Todas son optativas así que podemos obviarlas.

colorX es la más importante e indica los distintos colores que se utilizarán y como mínimo colocaremos dos aunque puede haber más. Lo más sencillo sería usarlos de este modo:

background-image: -moz-linear-gradient(#123, #789); /* una gradiente lineal */
background-image: -moz-radial-gradient(#123, #789); /* una gradiente radial */

Ver/Ocultar Ejemplo [+]

Otro ejemplo similar, utilizando varios colores, le agregamos amarillo:

background-image: -moz-linear-gradient(#123, #789, #BB0); /* una gradiente lineal */
background-image: -moz-radial-gradient(#123, #789, #BB0); /* una gradiente radial */

Ver/Ocultar Ejemplo [+]

La cantidad de colores no parece tener limitaciones y se distribuyen de manera proporcional pero también podemos controlar eso, agregando un porcentaje o una longitud. Esta longitud indicará en que posición comenzará a utilizarse ese color. En el primer ejemplo, los cinco colores se distribuyen parejos y en el segundo, el color verde (#00FF00) comienza 100 pixeles a la izquierda:

background-image: -moz-linear-gradient(0deg, #000000, #FF0000, #00FF00, #0000FF, #FFFFFF)
background-image: -moz-linear-gradient(0deg, #000000, #FF0000, #00FF00 100px, #0000FF, #FFFFFF)

Ver/Ocultar Ejemplo [+]

Le hemos agregado un valor más, el ángulo expresado en grados, eso permite establecer la dirección del gradiente:

background-image: -moz-linear-gradient(0deg, #FF0, #0FF);
background-image: -moz-linear-gradient(90deg, #FF0, #0FF);
background-image: -moz-linear-gradient(180deg, #FF0, #0FF);
background-image: -moz-linear-gradient(270deg, #FF0, #0FF);

Ver/Ocultar Ejemplo [+]

0 grados

90 grados

180 grados

270 grados

La opción es realmente intersante aunque parece compleja, sobre todo, nos permite generar gradientes que se verán bastante bien en distintos navegadores si es que nos limitamos a usar las carcterísitcas maas elementales es decir, establecer una gradiente lineal ya sea horizontal y vertical con sólo dos colores.

Estos dos último ejemplos, deberían verse en todos los navegadores indicados al incio de la entrada:

background-image: -moz-linear-gradient(#AAAAAA, #000000);
background-image: -webkit-gradient(linear, center top, center bottom, from(#AAAAAA), to(#000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#AAAAAA,endColorStr=#000000);"

background-image: -moz-linear-gradient(0deg,#AAAAAA, #000000);
background-image: -webkit-gradient(linear, left bottom, right top, from(#AAAAAA), to(#000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#AAAAAA,endColorStr=#000000);