Crear degradados sin usar imágenes, simplemente con CSS, es una de las posibilidades más útiles de CSS3. Podemos crear fondos sin necesidad de usar un editor de imágenes, con la facilidad de editarlos únicamente abriendo un editor de texto.

Muchísimos diseñadores -entre los que me incluyo- ya estaban usando estos degradados, pese a que la especificación del W3C aún no era definitiva. Un alto porcentaje de CSS3 está en esa situación y se emplean mientras tanto versiones “provisionales” precedidas de un prefijo de navegador. Al final de estas versiones se pone la versión sin prefijo para que, cuando la especificación sea definitiva, sobreescriba las provisionales. Sin embargo, ha habido algunos cambios en dicha sintaxis y toca revisar si nos puede afectar.

Al usar generadores automáticos como el de Colorzilla, obtenemos una lista de todos los elementos, incluida la versión sin prefijo:

background: -moz-linear-gradient(top, #f0f9ff 0%, #a1dbff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f9ff), color-stop(100%,#a1dbff));
background: -webkit-linear-gradient(top, #f0f9ff 0%,#a1dbff 100%);
background: -o-linear-gradient(top, #f0f9ff 0%,#a1dbff 100%);
background: -ms-linear-gradient(top, #f0f9ff 0%,#a1dbff 100%);
background: linear-gradient(to bottom, #f0f9ff 0%,#a1dbff 100%);

Como se puede ver en la última línea, ya están usando la sintaxis más reciente. Esta incluye la palabra to para indicar más claramente la dirección del degradado.

Diferencias entre la sintaxis de degradados css antigua y la actual

En la sintaxis antigua se indicaba el punto de origen del degradado y éste se dirigía hacia el punto contrario (que no se indicaba): top iría hacia bottom, left hacia right, etc. Ahora, lo que se indica es hacia dónde se dirige el degradado y no desde dónde empieza.

El resultado es, básicamente, que la dirección tiene que indicarse al revés de como se hacía hasta ahora: un degradado que originalmente fuera top, ahora será to bottom.

-ms-linear-gradient(top, orange, black);
Sintaxis antigua: se indica el origen
linear-gradient(to bottom, orange, black);
Sintaxis actual: se indica el destino

En el caso de indicar un ángulo en grados, en la versión anterior éstos se contaban en la dirección contraria a las agujas del reloj. Debido a que para otros elementos los grados se contaban en la dirección opuesta, se ha modificado la sintaxis para mantener la coherencia. Además, el punto del grado 0 ha cambiado de la derecha a la parte superior.

 

-ms-linear-gradient(200deg, lime, magenta);
Sintaxis antigua
linear-gradient(to bottom, orange, black);
Sintaxis actual

Podéis ver el resto de cambios, con imágenes explicativas, en este artículo de SitePoint.

4 thoughts on “Revisa tus degradados css3 sin prefijo

  1. Bueno, al menos para mi que todavía no me he decidido a usar degradados css, es una buena noticia :p
    Y visto lo visto, seguiré sin hacerlo hasta que sea un standard y lo soporten al menos los navegadores buenos 😉

    1. Jejejeje, Firefox, Chrome, Safari y Opera ? Aunque al final terminaremos metiendo también al explorer, porque la versión 9 es muy, muy digna y a la altura del resto.

      Ahora cuando hablemos de css, tendremos que meter también en el saco a los navegarores móviles, tablets y demás ? Eso casi me preocupa más :p

      1. A lo de los navegadores móviles… no nos queda más remedio 😛

        En cuanto a los “buenos”, supongo que te refieres a que soporten la versión sin prefijo, porque la otra ya la soportan todos. Lo acabo de revisar en caniuse.com y FF y Opera ya usan la versión sin prefijo (con “to): http://caniuse.com/#search=gradient

Deja un comentario

Facebook