CSS3 ümmargused ja elliptilised gradientid [CSS3 näpunäited]

Täna jätkame arutelu jätkamist CSS3 gradientid. Eelmises postituses oleme teile näidanud, kuidas luua Lineaarsed gradientid. Seekord me katame nende sugulase, Ümmargused ja elliptilised gradientid.

Gradienti süntaks

CSS3 gradient deklareeritakse kasutades taustapilt vara. See on parem ühilduvus, kui me peame ka lisama taustavärv ühes reeglis, nii et nad ei põrkuks üksteisega kokku. Seejärel kutsume radiaalse gradiendi loomiseks seda lihtsalt sellega radiaal-gradient () funktsiooni. Kalendri õigeks seadistamiseks on funktsioonis neli väärtust.

Esimene väärtus määratleb gradienti asend. Me võime kasutada kirjeldavat märksõna, nagu ülemine, alumine, kesk- ja vasakpoolne, või ka täpsemad, 50% 50% gradienti keskele või 0% 0% gradienti seadmiseks üleval vasakul.

Teine väärtus määratleb kuju ja gradiendi suurus, gradientide kujundamiseks on kaks argumenti, esiteks ellipsi mis on vaikimisi, ja teine on ringi.

Ja selle jaoks gradienti suurus, me saame valida ühe järgmistest kuue argumendist.

Väärtused	Kirjeldus
`kõige lähemal`	Kalde kuju vastab selle kasti küljele, mis on selle keskele kõige lähemal (ringide puhul) või vastab nii keskele lähimale vertikaalsele kui ka horisontaalsele küljele (ellipsi puhul).
`lähim nurgas`	Gradienti kuju on suur, nii et see vastab täpselt kasti lähimale nurgale selle keskelt.
`kõige kaugemal`	Sarnaselt lähima küljega, välja arvatud kuju on kohandatud nii, et see vastaks kasti küljele, mis on kõige kaugemal selle keskmest (või vertikaalsest ja horisontaalsest küljest).
`kõige kaugemal`	Gradienti kuju on suur, nii et see vastab täpselt kasti kõige kaugemale nurgast selle keskelt.
`sisaldama`	Sünonüüm `kõige lähemal`.
`katta`	Sünonüüm `kõige kaugemal`.

Tabeli allikas: Mozilla arendajavõrk.

Lõpuks määratleb kolmas ja neljas värvikombinatsioon. Niisiis, siin on, kuidas me kirjutada süntaks luua Elliptilised kalded ja seekord me kasutame katta gradienti suurus, nii et see levib laialdaselt, mis katab konteineri;

 keha taust-pilt: radiaal-gradient (keskel, ellipsi kate, # ffeda3, # ffc800);

Selle loomiseks Ringkiri kallakuga saame seda lihtsalt teha:

 keha taust-pilt: radiaal-gradient (keskpunkt, ringkate, # ffeda3, # ffc800);

Nagu nimigi ütleb, on gradient kuju.

Brauseri tugi

Pange tähele siiski, et kõik brauserid pakuvad sellele funktsioonile veel täielikku tuge, seega vajavad nad siiski müüja eesliidet. Seega, kogu täielik süntaks, mis töötab kõigis kaasaegsetes brauserites - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ ja Opera 11+ - näeb välja midagi sellist;

 keha taust-kujutis: radiaal-gradient (keskel põhi, ellipsi kate, # ffeda3, # ffc800); taustapilt: -o-radiaal-gradient (keskosas, ellipsi kate, # ffeda3, # ffc800); taustapilt: -ms-radiaal-gradient (keskosas, ellipsi kate, # ffeda3, # ffc800); taustapilt: -moz-radial-gradient (keskosas, ellipsi kate, # ffeda3, # ffc800); taustapilt: -webkit-radiaal-gradient (keskosas, ellipsi kate, # ffeda3, # ffc800);

Vaadake demot või laadige allikas alla, et mängida gradiendiga ringi.

Demo
Allalaadimise allikas

Lõplikud sõnad

CSS3 radiaalgradienti loomine ei ole nii raske, kui arvate, ja eriti siis, kui saad abi nende tööriistade abil koodi genereerimiseks:

Colorzilla gradientid
Gradientoo

Radiaalsuunaline gradient on ainult üks CSS3-vidinate tüüp, jätkame arutelu teemal tulevastes postitustes, nii et olge Hongkiat.com-i häälestatud