La semana pasada vimos las propiedades de sombreado para textos de CSS3. Aunque aún no es parte del estándar, Gecko, Webkit y Presto han introducido la habilidad de crear fondos con degradado a través de CSS sin necesidad de utilizar imágenes.
Esto significa que podemos añadir degradados lineales o radiales para Safari 4+, Chrome 1+, Firefox 3.6+ y Opera 11.10+ (solo lineales) utilizando tan solo CSS. Parece que IE10 también soporta degradados CSS3 y para aquellos navegadores más antiguos o que aún no lo soportan, existe un truco muy sencillo para ocuparnos de ellos y que nuestra página tenga el mismo aspecto independientemente del navegador que nos visite.
La sintaxis para crear degradados no era demasiado estándar hasta hace poco, por ejemplo la sintaxis que usaba Webkit para definir los degradados era todo lo contrario a la palabra “intuitivo” y todo lo alejado de lo que un estándar debe ser. En el Editor’s Draft de la W3C donde se está empezando a definir el estándar para los degradados de CSS3 han elegido como base una sintaxis mucho más parecida a la que utilizaba Mozilla mucho más legible.
Degradados en Internet Explorer anteriores a IE10
Los navegadores de Microsoft anteriores a la preview de IE10 utilizan su propiedad filter que incluye features para bastantes cosas, entre ellas, los degradados. La sintaxis utilizada por Microsoft es bastante más clara de lo que era la antigua sintaxis para Webkit. Solo hay que definir un color de inicio, otro de finalización y la orientación.
/* IE 6 y 7 /
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff000000', endColorstr='#77ff0000', gradientType='1');
/ IE 8 y 9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff000000', endColorstr='#77ff0000', gradientType='1')";El valor de los colores utiliza una sintaxis ARGB hexadecimal nada estándar donde el primer par es el valor alfa del color, del 00 transparente al ff opaco. El grandientType se usa para definir si el degradado será horizontal (1) o vertical (0). No existe degradado radial para IE anterior al 10.
Degradado en Internet Explorer 10
Como ya he indicado anteriormente, IE10 soporta los degradados que conformarán (algún día) parte del estándar de CSS3 de forma completa con la misma sintaxis que el resto de navegadores. En IE10 usaremos la extensión -ms para definirlos.
Degradados en Webkit (Chrome 1 a 9, Safari 4 a 5)
Como ya he comentado antes, los chicos de Webkit hicieron una cosa bastante rara con la sintaxis de los desgradados antes de Chrome 10 y Safari 5.1, sintaxis que ya está obsoleta y desaconsejada pero que añado por si las moscas. En esas versiones el degradado se definía de la siguiente manera:
-webkit-gradient({tipo}, {punto} [, {radio}]?, {punto} [, {radio}]? [, {fin}]*)-webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#ffffff));Degradado Lineal
Como la sintaxis en Opera 11.10, Chrome 10+, Safari 5.1+, Firefox 3.6+ y IE10+ es exactamente igual, vamos a tratarlos como si ya se tratara del estándar y no hacer una sección para cada uno repitiendo conceptos. Por lo tanto voy a eliminar cualquier prefijo propietario (-ms, -moz, -webkit, -op) de los ejemplos y después haré un ejemplo multinavegador.
El ángulo o punto de inicio del degradado
Tenemos dos opciones a la hora de definir un gradiente lineal, o bien definimos su punto de inicio, por ejemplo top o bien definimos su ángulo de inclinación en grados, grados centesimales o radianes, por ejemplo 45deg. Los puntos de inicio pueden ser top, right, left o bottom.
Definir un punto de inicio top o un grado de inclinación -90deg o 270deg es equivalente.
#fondo {
background: linear-gradient(top, black, white);
}Paradas de color
Podemos definir tantos colores en nuestros degradados como queramos:
#fondo {
background: linear-gradient(left, tomato, cyan, lightgreen);
}tomato 60%#fondo {
background: linear-gradient(left, tomato 20%, cyan 60%, lightgreen 100%);
}Degradado Radial
Al igual que con el degradado lineal, voy a obviar todos los prefijos propietarios y a utilizar una sintaxis limpia. Hay que tener en cuenta que Opera no soporta el degradado radial aún.
Degradado circular típico
El degradado radial más sencillo que podemos crear consiste en dos colores con una figura circular centrada:
#fondo-radial {
background-position: center center;
background: radial-gradient(circle, #black, #white);
}Shape
El degradado radial puede definir un shape que puede ser o circle o ellipse:
#fondo-radial {
background-position: center center;
background: radial-gradient(ellipse, #black, #white);
}Paradas y tamaños
Al igual que con los degradados lineales, los degradados radiales pueden definir puntos de parada y además pueden definir un tamaño que puede ser expresado en porcentajes, valores de longitud o palabras clave (closest-aside closest-corner farthest-side farthest-corner contain cover). Veamos este ejemplo de la página de Microsoft:
#fondo-radial {
background: radial-gradient(left bottom, circle farthest-side, #f7ff08 0%, #21ad11 50%, #00a3ef 80%);
}Repetición de gradientes
Los degradados pueden repetirse además para crear fondos bastante psicdélicos. Veamos otro ejemplo de Microsoft:
#fondo-radial {
background: repeating-radial-gradient(left bottom, ellipse farthest-side, #f7ff08 0%, #21ad11 10%, #00A3ef 20%);
}El ejemplazo
Como dije al principio existen trucos para que tanto los navegadores que soportan los degradados como los que no, dibujen las páginas con el mismo aspecto en cuanto a degradados se refiere. El truco consiste en añadir una imagen de fondo al inicio de la regla CSS para que todos aquellos navegadores que no soporten el degradado tengan una imagen con el mismo degradado que puede obtenerse por ejemplo, tomando una captura de pantalla del renderizado de uno de los navegadores que si los soporta:
#header {
/* navegadores sin soporte /
background: black url(images/cabecera_degradado.jpg) repeat-x;
/ Safari 4-5, Chrome 1-9 /
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(black));
/ Safari 5.1+, Chrome 10+ /
background: -webkit-linear-gradient(top, black, white);
/ Firefox 3.6+ /
background: -moz-linear-gradient(top, black, white);
/ Opera 11.10+ /
background: -o-linear-background(top, black, white);
/ IE 10 /
background: -ms-linear-background(top, black, white);
/ estándar */
background: linear-background(top, black, white);
}Conclusión
Hemos visto como utilizar los degradados de CSS3 que nos proporcionan una forma sencilla y rápida de crear degradados sin tener que recurrir a crear una imagen con un programa de edición de imágenes para ser incluida a posteriori como fondo de nuestros elementos.
Más en Genbeta Dev | Introducción a CSS3
Más Información | Gradientes en IE6,7,8 y 9
