CSS: n toistuvat kaltevuudet - CSS-temppuja

Toistaen kaltevuudet ottaa temppu voimme jo tehdä luova käyttö color-stopson linear-gradient()ja radial-gradient()merkinnät, ja leipoo se meille.

Ajatuksena on, että voimme luoda malleja luomistamme kaltevuuksista ja antaa niiden toistaa loputtomasti.

Verrataan lineaarista gradienttia (vasen) toistuvaan lineaariseen gradienttiin (oikea).

On temppu, jossa ei-toistuvat kaltevuudet, luoda kaltevuus siten, että jos se olisi pieni pieni suorakulmio, se olisi linjassa muiden pienten pienien suorakulmioiden versioiden kanssa luoda toistuva kuvio. Luo siis olennaisesti tämä kaltevuus ja aseta background-sizetekemään pieni pieni suorakaide. Tämän ansiosta raitojen tekeminen oli helppoa, jota voit sitten kiertää tai mitä tahansa.

Syntaksi

Toistuvia kaltevuuksia on kolme tyyppiä, joista kahta tuetaan tällä hetkellä virallisessa eritelmässä ja toista nykyisessä työluonnoksessa.

Kunkin merkinnän syntaksit ovat samat kuin niihin liittyvän liukuvärityypin. Esimerkiksi repeating-linear-gradient()noudattaa samaa syntaksia kuin linear-gradient().

Toistuva kaltevuus	Liittyvät merkinnät	Tuetaanko?
`repeating-linear-gradient()`	`linear-gradient()`	Joo
`repeating-radial-gradient`	`radial-gradient()`	Joo
`repeating-conic-gradient`	`conic-gradient()`	Ei

Missä kaltevuus toistuu, määrää lopullinen värin pysäytys . Jos n on 20px, koko gradienttia (joka sitten toistaa) on 20pxmukaan 20pxneliö. Sama pätee, jos kuvioon on ketjutettu useita värejä. Viimeinen väri lopullisella pysäyttimellä on se, mikä määrittää toiston koon ja sijainnin.

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

Katso Chris Coyierin (@chriscoyier) Pen lAkyo -koodi CodePenistä.

Sama säteen kanssa:

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

Katso Chris Coyierin (@chriscoyier) kynän toistuvat kaltevuudet CodePenistä.

Selaimen tuki

Toistuvat kaltevuudet nauttivat tällä hetkellä erinomaisesta selaintuesta. Siitä huolimatta puhumme vain lineaarisista ja säteittäisistä gradienteista tämän kirjoituksen aikaan, koska kartiomaiset kaltevuudet ovat edelleen ehdotettu ominaisuus eritelmän tason 4 työluonnoksessa. Toivomme, että näemme laajan hyväksynnän, kun se saavuttaa ehdokas suosituksen.

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.