| |
|---|
|
|
Esta lección es parte complementaria del tema GRADIENTES EN CSS en el sentido que se hace un tratamiento individual de los degradados lineales, para favorecer la riqueza argumentativa que sería imposible hacerlo en la publicación original (parte 1 de la serie) en la cual, originalmente, se incluyó originalmente la explicación de todos los gradientes, repercutiendo en un peso considerable, que afectaba la carga de la página, y el cansancio en la lectura.
De tal manera que esta lección es susceptible de posteriores modificaciones, en virtud de material nuevo que vaya surgiendo en internet, y que pueda contribuir a la ampliación de lo ya desarrollado.
Hecha esta aclaratoria, necesaria, paso de seguido a exponer el material producto de la investigación de este tema, según lo conseguifo hasta el momento.
IR A PORTAFOLIOEl primer tipo de gradiente es el gradiente lineal, que permite crear fondos degradados que van en una cierta dirección y cambian de un color a otro, dependiendo de la lista de colores indicada por parámetro.
Como se pudo comprobar en el resultado obtenido con la imagen 2, para crear un degradado lineal se deben definir al menos dos paradas de color.
Las paradas de color son los colores entre los que desea renderizar transiciones suaves. También puede establecer un punto inicial y una dirección (o un ángulo) junto con el efecto de degradado. Si recuerdas, en la confección de la imagen 2 no se especificó dirección, por lo cual el navegador asume el valor predeterminado, que es de arriba a abajo. En el gradiente lineal se especifica dirección.
La sintaxis a utilizar debe ser una de las siguientes (es la misma, pero con menor o mayor cantidad opcional de información):
Sintaxis:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
IR A PORTAFOLIO
En conocimiento de lo anterior, podemos definir direccionalidad agregando un parámetro nuevo antes de los colores, por ejemplo:
.box {
background: linear-gradient(to right, #000046, #1cb5e0);
}
Y, obtenemos cono resultado la siguiente imagen que se muestra a continuación:
Igualmente, cambiar este parámetro para que diga to top right crearía un degradado diagonal. También puedes influir para que la diagonal sea exacta, especificando algo como 45deg (o cualquier ángulo que elijas).
Yendo un paso más adelante, no es necesario que te detengas en tan solo dos colores. Y también puedes usar nombres de colores, de esta forma:
.box {
background: linear-gradient(to right, orange, #ec38bc, #7303c0, cyan);
}
En este caso, cada uno de los cuatro colores ocupará una cantidad igual del espacio disponible, dándonos un degradado suave y equilibrado.
Si no queremos una distribución uniforme, pero queremos que un color ocupe más espacio que otro, podemos especificar ese valor como un porcentaje directamente después del color, de esta manera:
.box {
background: linear-gradient(to right, #f05053 80%, #e1eec3);
}
Lo que nos proporciona esto:
Comprendidos, ¡y aplicados!, los ejemplos anteriores enunciemos los valores del gradiente lineal:
| Valor | Significado |
|---|---|
| linear-gradient( |
Gradiente básico entre colores. |
| linear-gradient( |
Gradiente con dirección o ángulo. |
| linear-gradient( |
Gradiente indicando el tamaño del color. |
Apliquemos el ejemplo más básico, donde simplemente indicaremos los colores del gradiente (para que se aprecie el degradado, como mínimo deben ser 2 colores):
div {
background-image: linear-gradient(blue, red);
}
Esto dibujará un degradado con los colores indicados en dirección desde arriba hacia abajo, que tal como ya se indicó, es la dirección por defecto. Se pueden ir añadiendo más colores al gradiente si se desea, o cambiar la dirección del degradado, como veremos a continuación:
Pero los parámetros que se pueden utilizar son los siguientes:
| Parámetros | Valor |
|---|---|
| Dirección del gradiente lineal (ver valores posibles más adelante). El valor por defecto es to bottom. | |
| Número de ángulos de la dirección del gradiente lineal. Alternativa a la opción anterior. | |
| El primer color del gradiente | |
| El siguiente color del gradiente | |
| De forma opcional, se puede indicar a que altura comienza a cambiar el gradiente. | |
| ... | (Se pueden seguir añadiendo colores) |
