Cambio de sintáxis en los gradientes de Css 3 15.4.12
Cambio de sintáxis en los gradientes de Css 3
Y en medio del baile cambió la música. Pero es lo que tiene si te gusta bailar y lo haces cuando la orquesta ensaya.
Así es el baile de las propuestas de Css3. La propuesta de la sintaxis del valor del gradiente cambió.
Lo que hasta fechas recientes se declaraba así:
background: linear-gradient(top, red, blue);
Con los obligados prefijos privativos, ahora está marcada como deprecated, y para que funciones con las nuevas versiones de los navegadores, por ejemplo FIrefox +ver.10, debemos utilizar la nueva que queda de la siguiente forma:
background: linear-gradient(to bottom, red, blue);
El cambio en la sintaxis de linear-gradient
La modificación salta a la vista. Afecta a la forma como se indica la dirección del gradiente. De dónde hacia dónde.
Anteriormente se indicaba el inicio, en el ejemplo "top", que el navegador completaba con el punto final (el opuesto al declarado).
En la nueva sintaxis se indica el punto final, "to bottom".
Sintaxis de linear-gradient angular
En el caso de querer un dibujado del gradiente con cierto ángulo, que no sea de arriba hacia abajo, de izquierda a derecha o al contrario, tal como en una diagonal o con cualquier otro ángulo, la sintaxis es:
background: linear-gradient(angle, red, blue);
angle es el valor del ángulo con su unidad. La típica es "deg".
0deg genera un gradiente horizontal de izquierda a derecha. Valores positivos obtienen un giro antihorario (contrario a las agujas del reloj, analógico, claro). Valores negativos giro horario.
Puntos de transición de los colores
Si no se indican puntos de stop&go los colores se distribuyen uniformemente para cubrir a todo el elemento. Este comportamiento se puede alterar utilizando dichos puntos:
/* la vieja sintaxis, deprecated */
background: linear-gradient(top, blue, white 80%, red);
/* la nueva, también con sus prefijos privativos */
background: linear-gradient(to bottom, blue, white 80%, red);
La lectura de esta declaración sería: hacia abajo (implícito desde arriba) color azul y en el 80% del height blanco, continuar con rojo hasta el final.
El valor indicado, 80%, corresponde al punto no en el que se comienza a mezclar el color indicado con el precedente, sino que en ese punto ya se ha alcanzado el color puro, sin mezclar.
El valor 0 de inicio y el final 100% no es necesario declararlos.
Gradientes Radiales Css
Si en vez de un gradiente linear quieres obtener uno radial basta con cambiar de prefijo y en vez de linear utilizar radial-gradient.
La sintaxis y significado es el mismo:
background: radial-gradient(red 10%, blue 50%, #000 70%);
Y para obtener otra cosa que círculos concéntricos utilizar los valores:
- closest-side
- closest-corner
- farthest-side
- farthest-corner
- contain
- cover
Uso de gradientes como máscaras
¿Recuerdas que background admite valores múltiples?
Pues utilizando esta característica y alguno de los múltiples gradientes posibles con zonas transparentes (sí, admiten también el valor "transparet" o declarar los colores en valores que incluyan canal alpha de transparencia como "rgba", se pueden crear máscaras para ocultar y mostrar zonas de una imagen utilizada también en la propiedad background.
/* la vieja sintaxis, deprecated */
background: linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(imagen.jpg);
/* la nueva, también con sus prefijos privativos */
background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,1)), url(imagen.jpg);
Con lo que obtendríamos algo así:
Por cierto, una alternativa al uso de gradientes como máscaras son las sombras. Un ejemplo explicado hace unos fechas.
Advertencia y disclaimer
Recuerda que estas propuestas de propiedades están en pleno desarrollo, así que nada ni nadie garantiza que lo que hoy sirve mañana haya que cambiarlo.
Ya pasó con la sintaxis utilizada en un principio por webkit. Tuvieron que abandonarla.
Y recuerda incluir todos y cada uno de los cuatro prefijos privativos junto a la propuesta.
En este tema y si quieres ver ejemplos, algunos realmente logrados, te será sencillo encontrarlos. Hay muchos y muy bueno. Sólo un ejemplo de gradientes animados.
Ya te lo decía al inicio:
Son los riesgos de lanzarse a la pista a bailar durante los ensayos de la orquesta ;-)
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso