Atkārtojot gradienti veikt triks, mēs jau varam darīt ar radošu izmantošanu color-stops, no linear-gradient()un radial-gradient()atzīmēm, un cep to mums.
Ideja ir tāda, ka mēs varam izveidot modeļus no mūsu izveidotajiem gradientiem un ļaut tiem bezgalīgi atkārtoties.
Pastāv triks ar neatkārtojamiem gradientiem, lai izveidotu gradientu tādā veidā, ka, ja tas būtu nedaudz mazs taisnstūris, tas sakristu ar citām mazām mazām taisnstūra versijām, lai izveidotu atkārtotu modeli. Tātad būtībā izveidojiet šo gradientu un iestatiet to, background-sizelai izveidotu šo mazo mazo taisnstūri. Tas ļāva viegli izgatavot svītras, kuras pēc tam varēja pagriezt vai ko citu.
Sintakse
Ir trīs atkārtojošu gradientu veidi, no kuriem divi pašlaik tiek atbalstīti oficiālajā specifikācijā un viens ir pašreizējā darba projektā.
Katra apzīmējuma sintakse ir tāda pati kā ar to saistītā gradienta tips. Piemēram, repeating-linear-gradient()ievēro to pašu sintaksi kā linear-gradient().
| Atkārtojot gradientu | Saistīts apzīmējums | Atbalstīts? |
|---|---|---|
repeating-linear-gradient() | linear-gradient() | Jā |
repeating-radial-gradient | radial-gradient() | Jā |
repeating-conic-gradient | conic-gradient() | Nē |
Vietu, kur gradients atkārtojas, nosaka galīgā krāsu apstāšanās . Ja tas ir pie 20pxlielums gradients (kas pēc tam atkārto) ir 20pxar 20pxkvadrātveida. Tas pats notiek, ja pie modeļa ir sasaistītas vairākas krāsas. Pēdējā krāsa ar pēdējo pieturu ir tā, kas nosaka atkārtojuma lielumu un atrašanās vietu.
.repeat ( background-image: repeating-linear-gradient( 45deg, yellow, yellow 10px, red 10px, red 20px /* determines size */ ); )Skatiet Krāsa Koijera (@chriscoyier) Pen lAkyo pildspalvu vietnē CodePen.
Tas pats ar radiālo:
.repeat ( background: repeating-radial-gradient( circle at 0 0, #eee, #ccc 50px ); )Skatiet Krāsa Koijera (@chriscoyier) pildspalvas atkārtojošos gradientus vietnē CodePen.
Pārlūka atbalsts
Atkārtotie slīpumi šobrīd bauda lielisku pārlūka atbalstu. Tas nozīmē, ka mēs runājam tikai par lineārajiem un radiālajiem gradientiem šīs rakstīšanas laikā, jo konusveida gradienti joprojām ir ierosinātā iezīme specifikācijas 4. līmeņa darba projektā. Lūk, cerot, ka mēs redzēsim plašu pieņemšanu, tiklīdz tā sasniegs kandidātu ieteikumus.
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 10 * | 3,6 * | 10 | 12 | 5,1 * |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4 * | 5,0–5,1 * |