gradientes CSS3 permiten mostrar transiciones suaves entre los dos o más colores.
Anteriormente, se tenía que utilizar las imágenes para estos efectos. Sin embargo, mediante el uso de gradientes CSS3 puede reducir el tiempo de descarga y el uso de ancho de banda. Además, los elementos con gradientes se ven mejor cuando se hace zoom, debido a que el gradiente es generado por el navegador.
CSS3 define dos tipos de gradientes:
- Los gradientes lineales (va hacia arriba / abajo / izquierda / derecha / diagonal)
- Los gradientes radiales (definido por su centro)
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos por -webkit-, -moz- , o -o- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| radial-gradient | 26.0 10.0 -webkit- |
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- |
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- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
Los gradientes lineales de CSS3
Para crear un gradiente lineal debe definir al menos dos etapas de color. paradas de color son los colores que desee para hacer transiciones suaves entre. También puede establecer un punto de partida y una dirección (o ángulo) junto con el efecto de degradado.
Sintaxis
background: linear-gradient( direction , color-stop1 ,
color-stop2, ... );Gradiente Lineal - De arriba a abajo (esto es por defecto)
El siguiente ejemplo muestra un gradiente lineal que comienza en la parte superior. Se inicia rojo, la transición a amarillo:
Ejemplo
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow); /* For
Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For
Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard
syntax */
} Inténtalo tú mismo " Gradiente Lineal - De izquierda a derecha
El siguiente ejemplo muestra un gradiente lineal que empieza desde la izquierda. Se inicia rojo, la transición a amarillo:
Ejemplo
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,
red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , yellow); /* Standard syntax */
} Inténtalo tú mismo " Gradiente Lineal - Diagonal
Usted puede hacer un gradiente diagonal especificando tanto las posiciones de salida horizontal y vertical.
El siguiente ejemplo muestra un gradiente lineal que comienza en la parte superior izquierda (y va a la parte inferior derecha). Se inicia rojo, la transición a amarillo:
Ejemplo
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left
top, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red, yellow); /* Standard syntax */
} Inténtalo tú mismo " El uso de ángulos
Si desea más control sobre la dirección del gradiente, se puede definir un ángulo, en lugar de las direcciones predefinidas (a abajo, arriba, a la derecha, a la izquierda, a la derecha abajo, etc.).
Sintaxis
background: linear-gradient( angle , color-stop1 ,
color-stop2 );
El ángulo se especifica como un ángulo entre una línea horizontal y la línea de gradiente.
El siguiente ejemplo muestra cómo usar ángulos en gradientes lineales:
Ejemplo
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(-90deg,
red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg,
red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg,
red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(-90deg,
red, yellow); /* Standard syntax */
} Inténtalo tú mismo " El uso de múltiples etapas de color
El siguiente ejemplo muestra un gradiente lineal (de arriba a abajo) con múltiples etapas de color:
Ejemplo
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,
yellow, green); /* For Firefox 3.6 to 15 */
background:
linear-gradient(red, yellow, green); /* Standard syntax */
} Inténtalo tú mismo " El siguiente ejemplo muestra cómo crear un gradiente lineal (de izquierda a derecha) con el color del arco iris y un poco de texto:
Ejemplo
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background:
-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*
For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
} Inténtalo tú mismo " El uso de Transparencia
gradientes CSS3 también apoyan la transparencia, que puede utilizarse para crear efectos de desvanecimiento.
Para aumentar la transparencia, se utiliza el rgba() función para definir las etapas de color. El último parámetro en el rgba() la función puede ser un valor de 0 a 1, y se define la transparencia del color: 0 indica una total transparencia, 1 indica todo color (sin transparencia).
El siguiente ejemplo muestra un gradiente lineal que empieza desde la izquierda. Comienza totalmente transparente, la transición a la plena color rojo:
Ejemplo
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari
5.1-6*/
background:
-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
/*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1)); /*Standard*/
} Inténtalo tú mismo " Repetición de un gradiente lineal
La repeating-linear-gradient() función se utiliza para repetir gradientes lineales:
Ejemplo
Un gradiente lineal repitiendo:
#grad {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red,
yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background:
-o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6
to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%,
green 20%);
/* Standard syntax */
background:
repeating-linear-gradient(red, yellow 10%, green 20%);
} Inténtalo tú mismo " Los gradientes radiales CSS3
Un degradado radial se define por su centro.
Para crear un degradado radial también debe definir al menos dos etapas de color.
Sintaxis
background: radial-gradient( shape size at position, start-color, ..., last-color );Por defecto, es la forma de elipse, el tamaño es más lejana esquina, y la posición es central.
Degradado radial - espaciados uniformemente etapas de color (esto es por defecto)
El siguiente ejemplo muestra un gradiente radial con paradas de color uniformemente espaciadas:
Ejemplo
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red, yellow, green); /*
Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera
11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /*
For Firefox 3.6 to 15 */
background: radial-gradient(red, yellow, green);
/* Standard syntax */
} Inténtalo tú mismo " Degradado radial - A diferencia etapas de color Spaced
El siguiente ejemplo muestra un gradiente radial con paradas de color diferente espaciados:
Ejemplo
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red 5%,
yellow 15%, green 60%); /*
Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, yellow
15%, green 60%); /* For Opera
11.6-12.0 */
background: -moz-radial-gradient(red 5%, yellow 15%,
green 60%); /*
For Firefox 3.6-15 */
background: radial-gradient(red 5%, yellow
15%, green 60%);
/* Standard syntax */
} Inténtalo tú mismo " Forma conjunto
El parámetro de forma define la forma. Se puede tomar el círculo o una elipse valor. El valor por defecto es elipse.
El siguiente ejemplo muestra un degradado radial con la forma de un círculo:
Ejemplo
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(circle, red, yellow, green); /*
Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera
11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow,
green); /* Firefox 3.6 to 15 */
background: radial-gradient(circle, red,
yellow, green);
/* Standard syntax */
} Inténtalo tú mismo " El uso de diversa talla Palabras clave
El parámetro de tamaño define el tamaño del gradiente. Se puede tomar cuatro valores:
- más cerca del lado de
- más alejada del lado de
- más cercano esquina
- más alejado de esquinas
Ejemplo
Un gradiente radial con diferentes palabras clave tamaño:
#grad1 {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60%
55%, closest-side, red, yellow, black);
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%,
closest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,
red, yellow, black);
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%,
farthest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
} Inténtalo tú mismo " Repetición de un gradiente radial
La repeating-radial-gradient() función se utiliza para repetir gradientes radiales:
Ejemplo
Un degradado radial repitiendo:
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(red,
yellow 10%, green 15%);
/* For Opera 11.6 to 12.0 */
background:
-o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Firefox
3.6 to 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%,
green 15%);
/* Standard syntax */
background:
repeating-radial-gradient(red, yellow 10%, green 15%);
} Inténtalo tú mismo " Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 » Ejercicio 6» Ejercicio 7 »