CSS3-toistuvat gradientit [CSS3-vinkit]

On monia CSS3-ominaisuuksia, jotka muuttavat tapaa, jolla koristamme verkkosivuston, joista yksi on CSS3-gradientit. Ennen CSS3: ta tarvitsemme varmasti kuvia, jotta luodaan gradienttivaikutus; nyt voimme toimittaa samat (ja paremmat) vaikutukset käyttämällä vain CSS: ää

Aiemmissa viestissämme olemme keskustelleet kahdentyyppisistä kaltevuuksista, jotka voidaan saavuttaa CSS3: lla:

• Radiaalinen ja
• Lineaariset gradientit.

Tällä kertaa aiomme tutkia heidän sisarensa: toistuvat kaltevuudet.

Perus toistaminen

Toistuvat gradientit on olennaisesti laajennus. Syntaksi on samankaltainen kuin määrittelemme radiaaliset ja lineaariset gradientit, vain se, mitä nimi viittaa, se myös toistaa värit määritetyssä suunnassa. Jos haluat toistaa lineaariset kaltevuudet, voimme käyttää tätä toimintoa: toistuva-lineaarinen-gradientilla, toistettaessa radiaalisia tai elliptisiä gradientteja käytämme tätä toimintoa: toistamalla-säteittäinen kaltevuus.

 / * Lineaarinen * / .gradient (tausta: toistuva-lineaarinen gradientti (0deg, # f9f9f9, #cccccc 20px);  / * Radial * / .gradient tausta: toistuva radiaalinen gradientti (50% 50%, ympyrä, # f9f9f9, #cccccc 20px);  

Koodissa ei ole paljon eroa, lukuun ottamatta värin toisto. Alla on yksinkertainen kuva, jossa kuvataan, miten tämä värintoisto toimii.

Vaikka yllä oleva kuva kuvaa vain toistuvia lineaarisia gradientteja, perusajatus koskee myös säteittäisiä gradientteja, joissa värit toistuvat äärettömästi, tässä tapauksessa missä tahansa suunnassa. Katso alla oleva linkki nähdäksesi demon.

• Näytä demo

Seuraavassa osassa näytämme, miten voimme käyttää CSS3: n toistuvia gradientteja todellisissa esimerkeissä.

Esimerkki: Kuvioiden luominen

Yleisin täytäntöönpano Toistuvat gradientit on luoda taustamalleja. Tässä esimerkissä aiomme luoda yksinkertaisia ​​pystysuuntaisia ​​raitoja.

 .kaltevuus tausta: toistuva lineaarinen gradientti (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);  

Huomaa, miten määritämme kaksi eri väriä - # f9f9f9 ja #cccccc - samassa paikassa, 20px. Tämä esimerkki terävöittää näiden kahden värin eroa ja eliminoi sumun.

Suuntaa suuntaus yksinkertaisesti muuttaa kulmaa - 90deg ohjaa sen vaakasuunnassa 45ast ohjaa sen vinosti ja niin edelleen.

• Näytä demo

Esimerkki: Paperilinjan luominen

Tässä toisessa esimerkissä aiomme luoda paperilinjan, jota saatat usein nähdä kannettavassa. Tämän vaikutuksen luomiseen tarvitaan vain a div, ei kuvia, vain CSS.

 .kaltevuus leveys: auto; korkeus: 500px; marginaali: 0 50px; tausta: -webkit-toistuva-lineaarinen gradientti (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); tausta: -moz-toistuva-lineaarinen gradientti (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); tausta: -o-toistuva-lineaarinen gradientti (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); tausta: toistuva lineaarinen gradientti (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); taustakoko: 100% 21px;  

Huomaa, että lisäsimme myös CSS3: n tausta-koko ominaisuus määrittää taustakuvien koot 100%, 20px. Vaikka CSS3-gradientit näyttävät "värit", se on luokiteltu kuvaksi, ei väri.

Seuraavaksi käytämme :ennen pseudo-elementti lisätä raita paperin vasemmalle puolelle.

 .kaltevuus: ennen sisältö: "; näyttö: inline-block; korkeus: 500px; leveys: 4px; reunan vasen: 4px kaksinkertainen # FCA1A1; asema: suhteellinen; vasen: 30px;  

Ja olemme valmiita, se on todella helppoa? Nyt voimme nähdä ne kaikki toiminnassa alla olevista linkeistä.

• Näytä demo
• Lataa lähde

Muita resursseja

• Webkit CSS3 Gradients
• CSS3-gradientit Microsoft Developer Networkissä