Opakovanie gradienty sa trik už môžeme robiť s kreatívne použitie color-stopsna strane linear-gradient()a radial-gradient()záznamov, a pečie sa mení stav na nás.
Ide o to, že z prechodov, ktoré vytvoríme, môžeme vytvárať vzory a umožniť im nekonečné opakovanie.
Existuje trik s neopakujúcimi sa prechodmi, ktorý vytvorí prechod takým spôsobom, že ak by to bol malý malý obdĺžnik, zarovnal by sa s ostatnými verziami malého malého obdĺžnika, aby vytvoril opakujúci sa vzor. Takže v podstate vytvorte ten gradient a nastavte ten background-sizemalý malý obdĺžnik. Vďaka tomu bolo ľahké vyrobiť pruhy, ktoré ste potom mohli otáčať alebo čokoľvek iné.
Syntax
Existujú tri typy opakujúcich sa prechodov, z ktorých dva sú v súčasnosti podporované v oficiálnej špecifikácii a jeden, ktorý je v aktuálnom pracovnom koncepte.
Syntax pre každú notáciu je rovnaká ako jej súvisiaci typ gradientu. Napríklad repeating-linear-gradient()dodržiava rovnakú syntax ako linear-gradient().
| Opakujúci sa prechod | Súvisiaca notácia | Podporované? |
|---|---|---|
repeating-linear-gradient() | linear-gradient() | Áno |
repeating-radial-gradient | radial-gradient() | Áno |
repeating-conic-gradient | conic-gradient() | Nie |
To, kde sa gradient opakuje, je určený konečným zastavením farby . Ak je to v 20px, veľkosť gradientu (ktoré sa potom opakuje) je 20pxod 20pxštvorec. To isté platí, ak je k vzoru pripútaných viac farieb. Výsledná farba s konečnou zastávkou je to, čo určuje veľkosť a umiestnenie opakovania.
.repeat ( background-image: repeating-linear-gradient( 45deg, yellow, yellow 10px, red 10px, red 20px /* determines size */ ); )Prezrite si Pen lAkyo od Chrisa Coyiera (@chriscoyier) na stránkach CodePen.
To isté s radiálnym:
.repeat ( background: repeating-radial-gradient( circle at 0 0, #eee, #ccc 50px ); )Prezrite si opakovanie gradientu pera od Chrisa Coyiera (@chriscoyier) na stránke CodePen.
Podpora prehľadávača
Opakujúce sa prechody si v súčasnosti užívajú skvelú podporu prehľadávačov. To znamená, že v čase písania tohto textu hovoríme iba o lineárnych a radiálnych gradientoch, pretože kužeľovité gradienty sú stále navrhovanou funkciou pracovného konceptu úrovne 4 špecifikácie. Dúfame, že sa dočkáme širokého prijatia, akonáhle dosiahne odporúčanie kandidáta.
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 10 * | 3,6 * | 10 | 12 | 5,1 * |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4 * | 5,0-5,1 * |