CSS3 kruhové a eliptické prechody [CSS3 tipy]
Dnes budeme pokračovať v našej diskusii Gradienty CSS3. V predchádzajúcom príspevku sme vám ukázali, ako vytvoriť Lineárne prechody. Tentokrát budeme pokrývať svojho príbuzného, Kruhové a eliptické prechody.
Syntax gradientu
Gradient v CSS3 je deklarovaný pomocou background-image vlastnosť. To je pre lepšiu kompatibilitu, keď tiež potrebujeme pridať farba pozadia v jednej sade pravidiel, aby sa navzájom nezlučovali. Potom, aby sme vytvorili radiálny gradient, jednoducho to nazveme radiálne gradient () Funkcie. K dispozícii sú štyri hodnoty, ktoré majú byť zahrnuté do funkcie na správne nastavenie gradientu.
Prvá hodnota definuje hodnotu poloha sklonu. Môžeme použiť popisné kľúčové slovo, napríklad horné, spodné, stredné a ľavé, alebo môžeme byť špecifickejšie, 50% 50% nastaviť prechod do stredu alebo 0% 0% nastaviť gradient na začiatok hore v ľavo.
Druhá hodnota definuje hodnotu tvar a veľkosť gradientu, existujú dva argumenty na tvarovanie gradientov, najprv elipsa ktorá je predvolená a druhá je kružnice.
A pre veľkosť gradientu, môžeme vybrať jeden z nasledujúcich šiestich argumentov.
| hodnoty | popis |
|---|---|
Najbližšie-side | Tvar gradientu sa stretáva s bočnou stranou krabice najbližšie k jeho stredu (pre kruhy) alebo spĺňa vertikálne a horizontálne strany najbližšie k stredu (pre elipsy). |
Najbližšie kútik | Tvar sklonu je taký veľký, že presne zodpovedá najbližšiemu rohu skrine od stredu. |
najvzdialenejšie strane | Podobne ako na najbližšej strane, okrem toho, že tvar je dimenzovaný tak, aby zodpovedal strane krabice, ktorá je najvzdialenejšia od stredu (alebo vertikálne a horizontálne). |
najďalej kútik | Tvar sklonu je taký veľký, že presne spĺňa najvzdialenejší roh krabice od stredu. |
obsahovať | Synonymum pre |
veko | Synonymum pre |
Tabuľka Zdroj: Mozilla Developer Network.
Nakoniec tretí a štvrtý definujú farebná kombinácia. Takže tu je, ako píšeme syntax na vytvorenie elipsovitý sklony a tentoraz budeme používať veko pre veľkosť gradientu, takže sa rozšíri široko, pokrývajúci kontajner;
teleso pozadie-obrázok: radiálny-gradient (centrum stredu, krycia elipsa, # ffeda3, # ffc800);
Vytvoriť kruhový gradient môžeme jednoducho urobiť takto:
telo pozadie-obrázok: radiálny-gradient (centrum stredu, kruhový obal, # ffeda3, # ffc800);
Ako naznačuje názov, tvar gradientu bude kruh.
Podpora prehliadača
Len si všimnite, že všetky prehliadače sú stále v procese poskytovania plnej podpory tejto funkcie, takže stále potrebujú predponu predajcu. Takže celá kompletná syntax, ktorá bude fungovať vo všetkých moderných prehliadačoch - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ a Opera 11+ - bude to niečo podobné;
telo pozadie-obrázok: radiálny gradient (stredné dno, krycia elipsa, # ffeda3, # ffc800); obrázok na pozadí: -o-radiálny-gradient (stredné dno, krycia elipsa, # ffeda3, # ffc800); obrázok na pozadí: -ms-radiálny gradient (stredné dno, krycia elipsa, # ffeda3, # ffc800); obrázok na pozadí: -moz-radiálny-gradient (stredné dno, krycia elipsa, # ffeda3, # ffc800); pozadie-obrázok: -webkit-radiálny gradient (stredné dno, krycia elipsa, # ffeda3, # ffc800);
Pozrite sa na demo alebo si stiahnite zdroj pre prehrávanie s prechodmi.
- demonštrácie
- Stiahnuť zdroj
Konečné slová
Vytváranie radiálneho gradientu CSS3 nie je tak ťažké, ako si myslíte, a obzvlášť keď získate pomoc z týchto nástrojov na generovanie kódu:
- Colorzilla Gradients
- Gradientoo
Radiálny gradient je len jeden typ gadgetov CSS3, budeme pokračovať v našej diskusii o tejto téme v budúcich príspevkoch, takže zostaňte naladení na Hongkiat.com
