CSS3 opakujúce sa prechody [Tipy CSS3]

Existuje veľa funkcií CSS3, ktoré menia spôsob, akým vyzdobíme webové stránky, z ktorých jedna je CSS3 Gradients. Pred CSS3 sme rozhodne potrebujú obrázky na vytvorenie gradientového efektu; Teraz sme schopní dodať rovnaké (a lepšie) efekty iba pomocou CSS

V predchádzajúcich príspevkoch sme diskutovali o dvoch typoch prechodov, ktoré možno dosiahnuť pomocou funkcie CSS3:

• Radiálne a
• Lineárne prechody.

Tentokrát sa pozrieme na ich súrodenca: opakujúce sa prechody.

Základné opakovanie

Opakovanie prechodov je v podstate predĺženie. Syntax je podobný tomu, ako definujeme radiálne a lineárne prechody, len to, čo naznačuje názov, bude tiež opakovať farby v určenom smere. Ak chcete opakovať lineárne gradienty, môžeme túto funkciu použiť: opakujúce sa lineárny gradient, pri opakovaní radiálnych alebo eliptických gradientov používame túto funkciu: opakujúcich sa radiálne gradient.

 / * Lineárne * / gradientné pozadie: opakujúci sa lineárny gradient (0deg, #f9f9f9, #cccccc 20px);  / * Radial * / .gradient pozadie: opakujúci sa radiálny gradient (50% 50%, kruh, # f9f9f9, #cccccc 20px);  

Nie je veľa rozdielu pre ostatné na kóde, s výnimkou opakovanie farieb. Nižšie je uvedený jednoduchý príklad, ktorý popisuje, ako funguje toto opakovanie farieb.

Hoci vyššie uvedený obrázok ilustruje len opakujúce sa lineárne prechody, základná myšlienka platí aj pre radiálne prechody, pri ktorých sa farby opakujú nekonečne, v tomto prípade v akomkoľvek smere. Ak chcete zobraziť demo, postupujte podľa nižšie uvedeného odkazu.

• Zobraziť demo

V ďalšej časti vám ukážeme, ako v reálnych príkladoch môžeme využiť CSS3 opakujúce sa prechody.

Príklad: Vytváranie vzorov

Najbežnejšia implementácia systému Opakovanie prechodov je vytvoriť vzory pozadia. V tomto príklade budeme vytvárať jednoduché vzory vertikálneho pruhu.

 .gradient pozadie: opakujúci sa lineárny gradient (0deg, #f9f9f9, #f9f9f9 20px, #cccccc 20px, #cccccc 40px);  

Všimnite si, ako definujeme dve rôzne farby - # f9f9f9 a #cccccc - na tom istom mieste, 20px. Tento príklad zvýši rozdiel medzi týmito dvoma farbami a odstráni rozmazanosť.

Ak chcete nasmerovať orientáciu, jednoducho zmeňte uhol - 90DEG bude smerovať horizontálne 45deg bude riadiť diagonálne a tak ďalej.

• Zobraziť demo

Príklad: Vytvorenie Paperline

V tomto druhom príklade vytvoríme knihu, ktorú často vidíte v notebooku. Ak chcete tento efekt vytvoriť, potrebujeme len div, žiadne obrázky, iba CSS.

 .gradient šírka: auto; výška: 500px; okraj: 0 50px; pozadie: -webkit-repeating-linear-gradient (-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px); pozadie: -moz-opakovanie-lineárny gradient (-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px); pozadie: -o-opakujúci sa-lineárny gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); pozadie: opakujúci sa lineárny gradient (-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px); veľkosť pozadia: 100% 21px;  

Všimnite si, že sme pridali aj CSS3 background-size Vlastnosť určuje veľkosť obrázkov na pozadí 100%, 20px. Napriek tomu, že gradienty CSS3 zobrazujú farby, v skutočnosti sú kategorizované ako obrázky, nie farba.

Ďalej budeme používať : before pseudo-prvok na pridanie pruhu na ľavú stranu papiera.

 .gradient: pred obsah: ""; zobrazenie: inline-block; výška: 500px; šírka: 4px; border-left: 4px double # FCA1A1; pozícia: relatívna; vľavo: 30px;  

A my sme hotoví, je to naozaj jednoduché? Teraz ich môžeme vidieť v akcii na nižšie uvedených odkazoch.

• Zobraziť demo
• Stiahnuť zdroj

Ďalšie zdroje

• Webkit CSS3 Gradients
• Gradienty CSS3 v sieti Microsoft Developer Network