Es muy usual que generalmente quiera dar un estilo artístico a su página, pues bien el uso de gradientes es una de ellas, aquí muestro el código que puede usar en su estilo…
Tipos de gradientes
Para CSS se han definido dos tipos de gradientes:
- Los gradientes lineales (va hacia arriba / abajo / izquierda / derecha / diagonal)
- Gradientes radiales (definido por su centro)
Gradientes lineales CSS
El gradiente lineal debe definir al menos dos tonos de color. Cada uno permite hacer transiciones suaves entre cada uno, en estos se deben establecer un punto de partida y una dirección (o un ángulo), junto con el efecto de gradiente.
Sintaxis general
background-image: 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 con amarillo y la transición pasa a rojo:
Este es el código de este gradiente que puede personalizar a su gusto:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 20px;
background-color: yellow; /* For browsers that do not support gradients */
background-image: linear-gradient(yellow,red); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
Usted puede adicionar a su gradiente varios tonos según lo considere para su diseño
Para este último caso no cambiaría mucho, solo le agregaría un color más, para este ejemplo he agregado el rojo como se puede ver arriba, y el código quedaría así:
<!DOCTYPE html>
<html>
<head>
<style>
#grad2 {
height: 60px;
background-color: yellow; /* For browsers that do not support gradients */
background-image: linear-gradient( yellow,blue,red); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id="grad2"></div>
</body>
</html>
Gradiente Lineal – De izquierda a derecha
También puede dársele una dirección al gradiente lineal, es decir se le puede indicar que empieza desde la izquierda. Se inicia en verde y pasa en la transición a amarillo:
El código para este ejemplo vendría a ser:
<!DOCTYPE html>
<html>
<head>
<style>
#grad3 {
height: 200px;
background-color: yellow; /* For browsers that do not support gradients */
background-image: linear-gradient(to left, green, yellow); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id="grad3"></div>
</body>
</html>
Gradiente Lineal – De derecha a izquierda
También puede dársele una dirección al gradiente lineal, es decir se le puede indicar que empieza desde la derecha. Se inicia en verde y pasa en la transición a amarillo:
El código para este ejemplo vendría a ser:
<!DOCTYPE html>
<html>
<head>
<style>
#grad4 {
height: 200px;
background-color: yellow; /* For browsers that do not support gradients */
background-image: linear-gradient(to right,green, yellow); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id="grad4"></div>
</body>
</html>
Gradiente Lineal – Diagonal
Para lograr el gradiente diagonal se debe especificar la posición de partida 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:
<!DOCTYPE html>
<html>
<head>
<style>
#grad5 {
height: 40px;
background-color: blue; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, blue, yellow);/* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id=»grad5″></div>
</body>
</html>
Desde otro ángulo
<!DOCTYPE html>
<html>
<head>
<style>
#grad6 {
height: 40px;
background-color: blue; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom left, blue, yellow);/* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id="grad6"></div>
</body>
</html>
Gradientes Ángulares
Al gradiente le puede indicar ángulos y posiciones de tipo ángular:
Su sintaxis sería:
background-image: linear-gradient(angle, color-stop1, color-stop2);
El ejemplo práctico sería
<!DOCTYPE html>
<html>
<head>
<style>
#grad8 {
height: 40px;
background-color: blue; /* For browsers that do not support gradients */
background-image: linear-gradient(-45deg, blue, silver);/* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id="grad8"></div>
</body>
</html>
Se vería así:
Gradientes con efectos de transparencia
Así como se ha ido manejando los efectos de transparencia para los fondos de color, actualmente se puede utilizar para crear efectos de desvanecimiento, que al igual que los fondos actuales usa la función RGBA () para definir las etapas de color. El último parámetro en la función RGBA () 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 de colores:
Su código sería:
<!DOCTYPE html>
<html>
<head>
<style>
#grad9 {
height: 20px;
background-color: silver; /* For browsers that do not support gradients */
background-image: linear-gradient(to left, rgba(255,0,0,0), rgba(255,0,0,1));/* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id="grad9"></div>
</body>
</html>
Repetición de gradientes
A los gradientes se les puede aplicar la misma regla de repetición como background, su sintaxis seria
background-image: repeating-linear-gradient(color 30%, color 70%);
Su código es:
<!DOCTYPE html>
<html>
<head>
<style>
#grad10 {
height: 40px;
background-color: silver; /* For browsers that do not support gradients */
background-image: repeating-linear-gradient(to left, rgba(255,0,0,0) 10%, rgba(255,0,0,1) 20%);/* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id="grad10"></div>
</body>
</html>
Se imprime en pantalla:
Gradientes radiales o elipticas con CSS
Las gradientes radiales tienen definido su centro, el cual para crear este tip de degradado se debe definir al menos dos tonos de color. como se observa en la siguiente sintaxis:
background-image: radial-gradient(shape size at position, start-color, …, last-color);
Por defecto, la forma es elíptica, el tamaño de la esquina es mayor y más lejana, y la posición es central, con espaciados uniformes en cada paso de color por defecto:
El siguiente ejemplo muestra un gradiente radial con paradas de color uniformemente espaciados, pero aplicando un desvanecimiento de color o degradado adicional para el color rojo:
El código utilizado es:
<!DOCTYPE html>
<html>
<head>
<style>
#grad11 {
height: 80px;
background-color: silver; /* For browsers that do not support gradients */
background-image: radial-gradient(rgba(255,0,0,0) , rgba(255,0,0,1) );/* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id="grad11"></div>
</body>
</html>
Sin embargo este es solo una consulta rápida, pero si desea prácticar y estudiar más este tema le recomiendo la página de la cual he tomado la información: