Gradiente de repetare CSS - CSS-Tricks

Gradientele repetate iau un truc pe care îl putem face deja cu utilizarea creativă a color-stopspe linear-gradient()și radial-gradient()notații și îl coace pentru noi.

Ideea este că putem crea modele din gradienții pe care îi creăm și le permitem să se repete la infinit.

Compararea unui gradient liniar (stânga) cu un gradient liniar care se repetă (dreapta).

Există un truc, cu gradiente care nu se repetă, pentru a crea gradientul în așa fel încât, dacă ar fi un mic dreptunghi mic, s-ar alinia cu alte versiuni mici de dreptunghi mic pentru a crea un model care se repetă. Deci, în esență, creați acel gradient și setați background-sizepentru a face acel mic dreptunghi mic. Acest lucru a făcut mai ușor să faceți dungi, pe care apoi le puteți roti sau orice altceva.

Sintaxă

Există trei tipuri de gradiente repetate, dintre care două sunt acceptate în prezent în specificațiile oficiale și unul care se află în schema de lucru curentă.

Sintaxa pentru fiecare notație este aceeași cu tipul de gradient aferent. De exemplu, repeating-linear-gradient()urmează aceeași sintaxă ca și linear-gradient().

Repetarea gradientului	Notare înrudită	Sprijinit?
`repeating-linear-gradient()`	`linear-gradient()`	da
`repeating-radial-gradient`	`radial-gradient()`	da
`repeating-conic-gradient`	`conic-gradient()`	Nu

În cazul în care gradientul se repetă este determinat de oprirea finală a culorii . În cazul în care, la 20px, mărimea gradientului (care se repetă atunci) este 20pxde 20pxpătrat. Același lucru este valabil dacă există mai multe culori legate de model. Culoarea finală cu oprirea finală este cea care determină dimensiunea și locația repetării.

.repeat ( background-image: repeating-linear-gradient( 45deg, yellow, yellow 10px, red 10px, red 20px /* determines size */ ); )

Vedeți Pen lAkyo de Chris Coyier (@chriscoyier) pe CodePen.

La fel și cu radiale:

.repeat ( background: repeating-radial-gradient( circle at 0 0, #eee, #ccc 50px ); )

Vedeți Gradientele repetate stilou de Chris Coyier (@chriscoyier) pe CodePen.

Suport pentru browser

Gradientele repetate se bucură în prezent de o asistență excelentă pentru browser. Acestea fiind spuse, vorbim doar de gradienți liniari și radiali în momentul scrierii acestui articol, deoarece gradienții conici sunt încă o caracteristică propusă în schița de lucru de nivel 4 a specificației. Iată să sperăm că vom vedea o adoptare largă odată ce va ajunge la recomandarea candidatului.

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.