Gradientes de repetición tienen un truco que ya podemos ver con el uso creativo de color-stopsla linear-gradient()y radial-gradient()anotaciones, y hornea en para nosotros.
La idea es que podemos crear patrones a partir de los degradados que creamos y permitirles que se repitan infinitamente.
Hay un truco, con degradados que no se repiten, para crear el degradado de tal manera que si fuera un pequeño rectángulo, se alinearía con otras pequeñas versiones de sí mismo para crear un patrón repetitivo. Así que, esencialmente, crea ese degradado y configura el background-sizepara hacer ese pequeño rectángulo. Eso facilitó la creación de rayas, que luego se podían rotar o lo que fuera.
Sintaxis
Hay tres tipos de gradientes repetidos, dos de los cuales se admiten actualmente en la especificación oficial y uno que está en el borrador de trabajo actual.
La sintaxis de cada notación es la misma que la del tipo de gradiente relacionado. Por ejemplo, repeating-linear-gradient()sigue la misma sintaxis que linear-gradient().
| Gradiente repetido | Notación relacionada | ¿Soportado? |
|---|---|---|
repeating-linear-gradient() | linear-gradient() | sí |
repeating-radial-gradient | radial-gradient() | sí |
repeating-conic-gradient | conic-gradient() | No |
El lugar donde se repite el degradado está determinado por la parada de color final . Si eso es a 20px, el tamaño del gradiente (que luego se repite) es una 20pxpor 20pxcuadrado. Lo mismo es cierto si hay varios colores encadenados al patrón. El color final con la parada final es lo que determina el tamaño y la ubicación de la repetición.
.repeat ( background-image: repeating-linear-gradient( 45deg, yellow, yellow 10px, red 10px, red 20px /* determines size */ ); )Vea el Pen lAkyo de Chris Coyier (@chriscoyier) en CodePen.
Lo mismo con radial:
.repeat ( background: repeating-radial-gradient( circle at 0 0, #eee, #ccc 50px ); )Vea los degradados repetidos de la pluma de Chris Coyier (@chriscoyier) en CodePen.
Soporte del navegador
Los gradientes repetidos disfrutan actualmente de una excelente compatibilidad con el navegador. Dicho esto, solo estamos hablando de gradientes lineales y radiales en el momento de escribir este artículo porque los gradientes cónicos todavía son una característica propuesta en el borrador de trabajo de Nivel 4 de la especificación. Esperamos que veamos una amplia adopción una vez que llegue a la recomendación del candidato.
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 10 * | 3,6 * | 10 | 12 | 5,1 * |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 4 * | 5,0-5,1 * |