CSS3 korduvad kalded [CSS3 näpunäited]

On palju CSS3 funktsioone, mis muudavad veebilehe kaunistamise viisi, millest üks on CSS3 gradient. Enne CSS3-d vajame gradientefekti loomiseks kindlasti pilte; nüüd on meil võimalik pakkuda sama (ja paremat) mõju, kasutades ainult CSS-i

Meie eelmistes postitustes oleme arutanud kahte tüüpi gradiente, mida saab CSS3-ga saavutada:

• Radiaalne ja
• Lineaarsed gradientid.

Seekord me vaatame oma vendasse: korduvad kalded.

Põhiline kordamine

Kraavide kordamine on sisuliselt laiendus. Süntaks on sarnane sellele, kuidas defineerime radiaalsed ja lineaarsed kalded, ainult seda, nagu nimigi ütleb, samuti kordab see värve kindlas suunas. Lineaarsete gradientide kordamiseks saame seda funktsiooni kasutada: korduv-lineaarne gradient, korrates radiaalseid või elliptilisi gradiente, kasutame seda funktsiooni: korduv-radiaal-gradient.

 / * Lineaarne * / .gradient taust: korduv-lineaarne gradient (0deg, # f9f9f9, #cccccc 20px);  / * Radiaalne * / .gradient taust: korduv-radiaalne gradient (50% 50%, ring, # f9f9f9, #cccccc 20px);  

Koodil on palju erinevusi, välja arvatud värvide kordamine. Allpool on lihtne illustratsioon selle värvi kordamise kohta.

Kuigi ülaltoodud pilt illustreerib ainult lineaarsete gradientide kordamist, kehtib põhiidee ka radiaalsete gradientide kohta, kus värvid korduvad lõpmatult, antud juhul mis tahes suunas. Demo vaatamiseks järgige allolevat linki.

• Kuva demo

Järgmises osas näitame teile, kuidas saame CSS3 korduvaid gradiente reaalsetes näidetes kasutada.

Näide: mustri loomine

Kõige tavalisem rakendamine Kraavide kordamine on luua taustmustreid. Selles näites loome lihtsad vertikaalsed triibud.

 .gradient (taust: korduv-lineaarne gradient (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);  

Pange tähele, kuidas me määratleme kahte erinevat värvi - # f9f9f9 ja #cccccc - samas kohas, 20tk. See näide teritab nende kahe värvi vahelist erinevust ja kõrvaldab häguse.

Suuna suunamiseks vahetame lihtsalt nurka - 90deg suunab selle horisontaalselt 45deg suunab selle diagonaalselt ja nii edasi.

• Kuva demo

Näide: Paperline'i loomine

Selles teises näites loome me paberiliini, mida te sageli märkmikus näete. Selle efekti loomiseks vajame ainult a div, pilte pole, ainult CSS.

 .gradient laius: auto; kõrgus: 500 px; varu: 0 50 px; taust: -webkit-korduv-lineaarne gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); taust: -moz-korduv-lineaarne gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); taust: -o-korduv-lineaarne gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); taust: korduv-lineaarne gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); tausta suurus: 100% 21px;  

Märkus lisasime ka CSS3 tausta suurus foonipildi suuruste määramiseks 100%, 20px. Kuigi CSS3 gradient kuvab "värve", liigitatakse see tegelikult pildiks, mitte värvi.

Seejärel kasutame : enne pseudoelement paberi vasakule küljele triipu lisamine.

 .gradient: enne sisu: "; kuva: inline-block; kõrgus: 500 px; laius: 4x; vasakul vasakul: 4xx topelt # FCA1A1; positsioon: suhteline; vasakule: 30px;  

Ja me oleme valmis, see on tõesti lihtne? Nüüd näeme neid kõiki allolevatest linkidest.

• Kuva demo
• Allalaadimise allikas

Täiendavad ressursid

• Webkit CSS3 gradientid
• CSS3 kalded Microsoft Developer Networkis