CSS3 apskritieji ir elipsiniai gradientai [CSS3 patarimai]
Šiandien mes tęsime diskusijas CSS3 gradientai. Ankstesniame įraše parodėme, kaip sukurti Linijiniai gradientai. Šį kartą mes apimsime jų gimines, Apvalūs ir elipsiniai gradientai.
Gradiento sintaksė
CSS3 gradientas deklaruojamas naudojant fono vaizdas nuosavybė. Tai yra geresnis suderinamumas, kai taip pat turime pridėti fono spalva vienoje taisyklėje, kad jie nesusitiktų vienas su kitu. Tada, norėdami sukurti radialinį gradientą, paprasčiausiai tai vadiname radialinis gradientas () funkcija. Norint tinkamai nustatyti gradientą, į funkciją turi būti įtrauktos keturios reikšmės.
Pirmoji vertė apibrėžia gradiento padėtis. Mes galime naudoti aprašomąjį raktinį žodį, pvz., Viršutinį, apatinį, centrinį ir kairįjį, taip pat galime būti konkretesni, 50% 50% nustatyti nuolydį centre arba 0% 0% nustatyti gradiento pradžią viršuje kairėje.
Antroji vertė apibrėžia formos ir gradiento dydis, yra du argumentai gradientų formavimui, pirma elipsė kuris yra numatytasis, o antrasis - ratą.
Ir už gradiento dydis, galime pasirinkti vieną iš šių šešių argumentų.
| Vertybės | apibūdinimas |
|---|---|
arčiausiai | Gradiento forma atitinka dėžutės, esančios arčiausiai jos centro, pusę (apskritimams) arba atitinka tiek vertikalias, tiek horizontalias, arčiausiai centro esančias puses (elipsėms). |
artimiausio kampo | Gradiento forma yra tokio dydžio, kad jis tiksliai atitiktų artimiausią langelio kampą nuo centro. |
toliausiai | Panašus į artimiausią, išskyrus formą, kad jis atitiktų dėžės šoną, nutolusią nuo jos centro (arba vertikalios ir horizontalios).. |
tolimiausias kampas | Gradiento forma yra tokio dydžio, kad jis tiksliai atitiktų tolimiausią langelio kampą nuo centro. |
yra | Sinonimas |
padengti | Sinonimas |
Lentelės šaltinis: „Mozilla“ kūrėjų tinklas.
Galiausiai trečiasis ir ketvirtasis apibrėžia spalvų derinys. Taigi, čia mes rašome sintaksę, kad sukurtume Elipsinė gradientai, ir šį kartą naudosime padengti gradiento dydžiui, todėl jis plačiai paplitus, apimantis konteinerį;
kūnas fono vaizdas: radialinis gradientas (centrinis centras, elipsės dangtis, # ffeda3, # ffc800);
Norėdami sukurti Apskritimas nuolydis galime tai padaryti taip:
kūnas fono vaizdas: radialinis gradientas (centrinis centras, apskritimo viršelis, # ffeda3, # ffc800);
Kaip rodo pavadinimas, gradiento forma bus apskritimas.
Naršyklės palaikymas
Vis dėlto atkreipkite dėmesį, tačiau visos naršyklės vis dar teikia visišką paramą šiai funkcijai, todėl jiems vis tiek reikalingas tiekėjo priešdėlis. Taigi visa visa sintaksė, kuri veiks visose šiuolaikinėse naršyklėse - IE10 +, „Firefox 3.6+“, „Chrome 4.0+“, „Safari 4.0+“ ir „Opera 11“+ - atrodys panašus;
kūnas fono vaizdas: radialinis gradientas (vidurinis apačia, elipsės dangtis, # ffeda3, # ffc800); fono vaizdas: -o-radialinis gradientas (vidurinis apačia, elipsės dangtelis, # ffeda3, # ffc800); fono vaizdas: -ms-radialinis gradientas (vidurinis apačia, elipsės dangtelis, # ffeda3, # ffc800); fono vaizdas: -moz-radial-gradient (vidurinis apačia, elipsės dangtelis, # ffeda3, # ffc800); fono vaizdas: -webkit-radialinis gradientas (vidurinis apačia, elipsės dangtelis, # ffeda3, # ffc800);
Patikrinkite demonstraciją arba atsisiųskite šaltinį, kad galėtumėte žaisti su gradientais.
- Demo
- Atsisiųsti šaltinį
Galutiniai žodžiai
CSS3 radialinio gradiento kūrimas nėra toks sunkus, kaip manote, ir ypač tada, kai gausite pagalbos iš šių įrankių kodo generavimui:
- Colorzilla gradientai
- Gradientoo
Radialinis gradientas yra tik vienas iš CSS3 įtaisų tipų, mes tęsime diskusijas šiuo klausimu būsimuose pranešimuose, todėl palaikykite ryšį su „Hongkiat.com“
