Krožni in eliptični gradniki CSS3 [Nasveti CSS3]
Danes bomo nadaljevali našo razpravo CSS3 gradienti. V prejšnji objavi smo vam pokazali, kako ustvariti Linearni gradienti. Tokrat bomo pokrili njihovega sorodnika, Krožni in eliptični gradienti.
Sintaksa gradienta
Gradient v CSS3 je deklariran z uporabo slika ozadja nepremičnine. To je za boljšo združljivost, ko moramo tudi dodati Barva ozadja v enem nizu pravil, tako da ne bodo trčili med seboj. Potem, da ustvarimo radialni gradient, ga preprosto pokličemo s tem radialni gradient () funkcijo. V funkciji so vključene štiri vrednosti za pravilno nastavitev preliva.
Prva vrednost določa gradientni položaj. Lahko uporabimo opisno ključno besedo, kot so vrh, dno, središče in levo, ali pa smo lahko tudi bolj specifični, 50% 50% nastavite preliv v sredini ali 0% 0% , da nastavite preliv, da se začne pri zgoraj levo.
Druga vrednost določa obliko in velikost gradienta, Obstajata dva argumenta za oblikovanje prelivov, prvi elipse ki je privzeta, druga pa je krog.
In za velikost gradienta, lahko izberemo enega od naslednjih šestih argumentov.
| Vrednosti | Opis |
|---|---|
najbližji strani | Oblika gradienta se ujema s stranico škatle, ki je najbližje njenemu središču (za kroge) ali ustreza tako vertikalnim kot vodoravnim stranem, ki so najbližje središču (za elipse). |
najbližji vogal | Oblika gradienta je tako velika, da se natančno ujema z najbližjim kotom zaboja od njegovega središča. |
najbolj oddaljena stran | Podobno najbližji strani, razen da je oblika velika, da ustreza stranski škatli, ki je najbolj oddaljena od središča (ali navpične in vodoravne strani). |
najbolj oddaljeni vogal | Oblika gradienta je tako velika, da se natančno ujema z najbolj oddaljenim kotom škatle od središča. |
vsebujejo | Sinonim za |
pokrov | Sinonim za |
Vir tabele: Mozilla Developer Network.
Nazadnje tretji in četrti določata barvno kombinacijo. Torej, tukaj je, kako napišemo skladnjo za ustvarjanje Eliptičen gradientov in tokrat bomo uporabili pokrov za velikost gradienta, tako da se bo razširila široko in prekrila posodo;
telo ozadje-slika: radialni gradient (središče, pokrov elipse, # ffeda3, # ffc800);
Če želite ustvariti Okrožnica gradient lahko preprosto naredimo na ta način:
telo ozadje-slika: radialni gradient (sredinski center, pokrov kroga, # ffeda3, # ffc800);
Kot že ime pove, bo gradientna oblika krog.
Podpora za brskalnik
Samo upoštevajte, da so vsi brskalniki še vedno v postopku zagotavljanja popolne podpore za to funkcijo, zato še vedno potrebujejo predpono prodajalca. Tako je celotna sintaksa, ki bo delovala v vseh sodobnih brskalnikih - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ in Opera 11+ - bo videti nekaj takega;
telo ozadje-slika: radialni gradient (sredinsko dno, pokrov elipse, # ffeda3, # ffc800); background-image: -o-radialni gradient (sredinsko dno, pokrov elipse, # ffeda3, # ffc800); background-image: -ms-radialni gradient (sredinsko dno, pokrov elipse, # ffeda3, # ffc800); background-image: -moz-radial-gradient (sredinsko dno, pokrov elipse, # ffeda3, # ffc800); background-image: -webkit-radialni gradient (sredinsko dno, pokrov elipse, # ffeda3, # ffc800);
Oglejte si predstavitev ali prenesite vir za igranje s prelivi.
- Demo
- Prenesi vir
Končne besede
Ustvarjanje radialnega gradienta CSS3 ni tako težko, kot se vam zdi, in še posebej, ko dobite pomoč iz teh orodij za generiranje kode:
- Colorzilla Gradients
- Gradientoo
Radialni gradient je samo ena vrsta CSS3 gadients, nadaljevali bomo našo razpravo o temi v prihodnjih objavah, zato ostanite z nami na Hongkiat.com
