CSS3 admite el uso de dos tipos de gradientes
Gradientes lineales (baja / sube / izquierda / derecha / diagonal)
Gradientes radiales (definidos por su centro)
- ¿MySpace, Friendster, Tagged, Orkut y Photobucket realmente usan el Importador de contactos de Improsys?
- Usando WordPress, ¿cuál fue su primera razón para aplicar el código usted mismo?
- ¿Cuál es la mejor manera de controlar los ataques en la URL del administrador de WordPress?
- ¿Qué hace exactamente body-parser con express.js y por qué lo necesito?
- ¿Cuál es la diferencia entre app.js, nw.js y electron?
Para crear un degradado lineal, debe definir al menos dos paradas de color. Las paradas de color son los colores entre los que desea generar transiciones suaves. También puede establecer un punto de inicio y una dirección (o un ángulo) junto con el efecto de degradado.
Sintaxis:
fondo: gradiente lineal ( dirección , color-stop1 , color-stop2, … );
Ejemplos
Gradiente estándar
#grad {
fondo: rojo; / * Para navegadores que no admiten gradientes * /
fondo: -webkit-linear-gradient (rojo, amarillo); / * Para Safari 5.1 a 6.0 * /
fondo: -o-lineal-gradiente (rojo, amarillo); / * Para Opera 11.1 a 12.0 * /
fondo: -moz-linear-gradient (rojo, amarillo); / * Para Firefox 3.6 a 15 * /
fondo: gradiente lineal (rojo, amarillo); / * Sintaxis estándar * /
}
Gradiente lineal: de izquierda a derecha
#grad {
fondo: rojo; / * Para navegadores que no admiten gradientes * /
fondo: -webkit-linear-gradient (izquierda, rojo, amarillo); / * Para Safari 5.1 a 6.0 * /
fondo: -o-lineal-gradiente (derecha, rojo, amarillo); / * Para Opera 11.1 a 12.0 * /
fondo: -moz-linear-gradient (derecha, rojo, amarillo); / * Para Firefox 3.6 a 15 * /
fondo: gradiente lineal (a la derecha, rojo, amarillo); / * Sintaxis estándar * /
}
Eche un vistazo a estos ejemplos para obtener más contexto.
Gradientes CSS3
Gradientes CSS | CSS-Tricks
