Práctica 7

Los gradientes de CSS3 permiten mostrar transiciones entre dos o más colores
Anteriormente, se tenían que utilizar imágenes para estos efectos. Sin embargo, mediante el uso de gradientes CSS3 se reduce el tiempo de descarga y el uso de ancho de banda. Además, los elementos con gradientes se ven mejor cuando se aumenta el zoom de la pantalla, ya que el gradiente es generado por el navegador.

CSS3 define dos tipos de gradientes:

- Degradados lineales (hacia arriba / abajo / izquierda / derecha / diagonal).
- Degradado radial (definido por su centro)

Propiedad
linear-gradient	26.0 10.0 -webkit-	12.0	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-
radial-gradient	26.0 10.0 -webkit-	12.0	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.6 -o-
repeating-linear-gradient	26.0 10.0 -webkit-	12.0	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-
repeating-radial-gradient	26.0 10.0 -webkit-	12.0	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.6 -o-

Para crear un degradado lineal se deben definir al menos dos colores entre los cuales se hará la transición. También se puede establecer un punto de partida y una dirección (o un ángulo), junto con el efecto de degradado. Si no se le establece dirección, por defecto hace el degradado de arriba a abajo.

Sintaxis:

background: linear-gradient (dirección, color1 , color2, ... );

De arriba hacia abajo	background: linear-gradient(#0000FF, #F82610); ó background: linear-gradient(to top,#0000FF, #F82610);
De arriba hacia abajo	background: linear-gradient(to bottom,#0000FF, #F82610);
De izquierda a derecha	background: linear-gradient(to right,#0000FF, #F82610);
De derecha hacia izquierda	background: linear-gradient(to left,#0000FF, #F82610);

Para crear un degradado lineal con ángulo se debe especificar los grados del ángulo en lugar de la dirección.

Sintaxis:

background: linear-gradient (ángulo, color1 , color2, ... );

El ángulo se especifica como un ángulo entre una línea horizontal y la línea de gradiente, yendo hacia la izquierda. En otras palabras, 0deg crea un gradiente de abajo hacia arriba, mientras que 90 grados genera un gradiente de izquierda a derecha.

Con ángulo de 25ºC	background: linear-gradient(25deg,#0000FF, #F82610);
Con ángulo de 165ºC	background: linear-gradient(165deg,#0000FF, #F82610);

Para crear un degradado lineal con múltiples colores sólo hay que especificar en el css todos los colores que queramos que aparezcan en el degradado.

Sintaxis:

background: linear-gradient (color1 , color2, color3,... );

Tres colores	background: linear-gradient(#0000FF, #F82610, #000000);
Cuatro colores hacia la derecha	background: linear-gradient(to right, #0000FF, #F82610, #000000, #FFDE00);

Para añadir transparencia, usamos la función rgba() para definir los colores. El último parámetro en la función rgba() puede ser un valor entre 0 y 1, y define la transparencia del color: 0 indica una total transparencia, 1 indica todo color (sin transparencia).

Sintaxis:

background: linear-gradient (dirección, rgba(color1,color2,color3,transparecia), rgba(color1,color2,color3,transparecia) );

De transparencia total a opaco total	background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,150,100,1));
Varios colores con transparencia	background: linear-gradient(70deg, rgba(100,50,100,0.5), rgba(0,150,100,0.7), rgba(80,250,100,0.2), rgba(200,0,120,0.7));

Sintaxis:

background: repeating-linear-gradient(red, yellow 10%, green 20%);

Sin repetición	background: linear-gradient(red, yellow 10%, green 20%);
Con repetición	background: repeating-linear-gradient(red, yellow 10%, green 20%);

Un degradado radial se define por su centro.
Para crear un degradado radial también debe definir al menos dos paradas de color.
Por defecto la forma es de elipse.

Sintaxis:

background: radial-gradient( tamaño/forma/posición, colorInicio, ..., colorFinal);

Para los diferentes parámetros que se le pueden añadir al atributo radial-gradient es recomendable poner los prefijos de los diversos motores de renderizado (-o-, -webkit-, -moz-, etc)

El parámetro de tamaño define el tamaño del gradiente. Se puede tomar cuatro valores:
- closest-side
- farthest-side
- closest-corner
- farthest-corner

Tres colores en elipse	background: radial-gradient(red 10%, yellow 40%, blue 70%);
Cuatro colores en círculo con repetición	background: repeating-radial-gradient(circle, red, yellow 8%, green 12%, blue 20%);
Formas personalizadas	background: -moz-radial-gradient(10%, ellipse farthest-corner, #66f 60%, #f80 85%, #ffc); background: -webkit-radial-gradient(20%, ellipse farthest-corner, #0000F5 40%, #FF8800 95%, #A1A113);
Formas personalizadas	background: -moz-radial-gradient(30%, circle closest-side, #00FCFF 40%, #FF2A00 55%, #282801); background: -webkit-radial-gradient(30%, circle closest-side, #00FCFF 40%, #FF2A00 55%, #282801);