CSS3 kartojantys gradientai [CSS3 patarimai]

Yra daug CSS3 savybių, kurios keičia būdą, kaip mes papuošiame svetainę, viena iš jų yra CSS3 gradientai. Prieš CSS3, mums tikrai reikia atvaizdų, kad būtų sukurtas gradiento efektas; dabar mes galime pateikti tuos pačius (ir geresnius) efektus naudodami tik CSS

Ankstesniuose pranešimuose aptarėme dviejų tipų gradientus, kuriuos galima pasiekti su CSS3:

• Radialinis ir
• Linijiniai gradientai.

Šį kartą ketiname pažvelgti į jų brolį: pasikartojančius gradientus.

Pagrindinis kartojimas

Pakartotiniai gradientai iš esmės yra pratęsimas. Sintaksė yra panaši į tai, kaip apibrėžiame radialinius ir linijinius gradientus, tik tai, kaip nurodo pavadinimas, taip pat pakartos spalvas tam tikra kryptimi. Norėdami kartoti tiesinius gradientus, galime naudoti šią funkciją: kartojamasis linijinis gradientas, pakartodami radialinius arba elipsinius gradientus, naudojame šią funkciją: kartotinis radialinis gradientas.

 / * Linijinis * / .gradientas fonas: kartotinis linijinis gradientas (0deg, # f9f9f9, #cccccc 20px);  / * Radialinis * / .gradientas (fonas: kartotinis radialinis gradientas (50% 50%, apskritimas, # f9f9f9, #cccccc 20px);  

Kitų kodų skirtumas nėra didelis, išskyrus spalvų kartojimas. Žemiau yra paprasta iliustracija, kurioje aprašoma, kaip veikia šis spalvų kartojimas.

Nors aukščiau pateiktas vaizdas tik iliustruoja kartotinius linijinius gradientus, pagrindinė idėja taip pat taikoma radialiniams gradientams, kuriuose spalvos kartojasi, šiuo atveju bet kuria kryptimi. Norėdami pamatyti demonstraciją, atlikite toliau pateiktą nuorodą.

• Peržiūrėti demonstraciją

Kitame skyriuje parodysime, kaip galime naudoti CSS3 kartojamus gradientus tikruose pavyzdžiuose.

Pavyzdys: modelių kūrimas

Dažniausiai įgyvendinamas Pakartotiniai gradientai yra sukurti fono modelius. Šiame pavyzdyje ketiname sukurti paprastus vertikalių juostų modelius.

 .gradientas (fonas: kartotinis linijinis gradientas (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);  

Atkreipkite dėmesį, kaip apibrėžiame dvi skirtingas spalvas - # f9f9f9 ir #cccccc - toje pačioje vietoje, 20px. Šis pavyzdys sustiprins skirtumą tarp šių dviejų spalvų ir pašalins neaiškumą.

Norėdami nukreipti orientaciją, paprasčiausiai keičiame kampą - 90deg nukreips jį horizontaliai 45deg nukreips ją įstrižai ir pan.

• Peržiūrėti demonstraciją

Pavyzdys: „Paperline“ kūrimas

Šiame antrajame pavyzdyje ketiname sukurti popierinę liniją, kurią dažnai galite matyti nešiojamojoje knygoje. Norint sukurti šį efektą, mums reikia tik div, jokių vaizdų, tik CSS.

 .gradientas plotis: auto; aukštis: 500 px; skirtumas: 0 50px; fonas: -webkit-kartojantis linijinis gradientas (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); fonas: -moz kartojantis linijinis gradientas (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); fonas: -o-kartojantis linijinis gradientas (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); fonas: kartotinis linijinis gradientas (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); fono dydis: 100% 21px;  

Pastaba mes taip pat pridėjome CSS3 fono dydis ypatybės, norėdami nurodyti fono paveikslėlių dydžius 100%, 20px. Nors CSS3 gradientai rodo „spalvas“, jis faktiškai priskiriamas vaizdui, ne spalva.

Toliau naudosime : anksčiau pseudo elementas kairėje popieriaus pusėje pridėti juostelę.

 .gradientas: prieš turinys: "; ekranas: inline-block; aukštis: 500 px; plotis: 4px; kairėje: 4px dvigubas # FCA1A1; pozicija: santykinis; kairėje: 30px;  

Ir mes darome, tai tikrai paprasta? Dabar mes matome juos visus veikdami iš toliau pateiktų nuorodų.

• Peržiūrėti demonstraciją
• Atsisiųsti šaltinį

Kiti ištekliai

• Webkit CSS3 gradientai
• „CSS3“ gradientai „Microsoft“ kūrėjų tinkle