| |
|---|
|
|
Esta lección es parte complementaria del tema GRADIENTES EN CSS en el sentido que se hace un tratamiento individual de los degradados repetitivos, 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 conseguido hasta el momento.
IR A PORTAFOLIO2. ¿EN QUÉ CONSISTE?
Por último, todos los gradientes que hemos visto permiten la posibilidad de añadir el prefijo repeating- para conseguir que el efecto del gradiente, en lugar de adaptarse a la región completa, realice una repetición constantemente. Comprueba los siguientes ejemplos de forma individual:
div {
background: repeating-linear-gradient(blue 10%, yellow 20%, red 30%); /* Ejemplo 1 */
background: repeating-radial-gradient(blue 10%, yellow 20%, red 30%); /* Ejemplo 2 */
background: repeating-conic-gradient(blue 10%, yellow 20%, red 30%); /* Ejemplo 3 */
}
Es importante que al usar el prefijo repeating- se especifiquen tamaños a los colores, puesto que se necesita saber cuando comenzará a repetirse. En los ejemplos anteriores, los colores seguirían el patrón hasta el último color y volverían a repetirse sucesivamente, de forma que tendríamos:
