01 ngo-04
Ukudala i-Cross-Browser Linear Gradients nge-CSS3
Ama-gradient angqimba
Uhlobo oluvame kakhulu lwe-gradient uzobona li-gradient eqondile emibala emibili. Lokhu kusho ukuthi i-gradient izohamba ngendlela eqondile ishintsha kancane kancane ukusuka kombala wokuqala kuya kwesibili eceleni kwalolo lugqa. Isithombe kuleli khasi sibonisa i-gradient elula ngakwesobunxele kuya kwesokudla # 999 (grey omnyama) kuya ku- #fff (emhlophe).
Ama-gradient angama-line alula kakhulu ukuwachaza, futhi abe nokusekela kakhulu kuziphequluli. Ama-gradient ajwayelekile e-CSS3 asekelwa ku-Android 2.3+, i-Chrome 1+, i-Firefox 3.6+, i-Opera 11.1+, ne-Safari 4+. I-Internet Explorer ingafaka ama-gradients usebenzisa isihlungi bese iwasekela ku-IE 5.5. Lokhu akuyona i-CSS3, kodwa kuyindlela yokwenza ukuhambisana kwesiphequluli.
Uma uchaza i-gradient udinga ukuchaza izinto eziningana ezehlukene:
- Uhlobo luni lwe-gradient elingu-linear noma oluvuthayo
- Lapho i-gradient kufanele iqale khona
- Lapho i-gradient kufanele ime khona
- Yimiphi imibala e-gradient futhi kufanele iqale futhi ime kuphi
Ukuze uchaze ama-gradient ahambisanayo usebenzisa i-CSS3, ubhala:
i-gradient eqondile (i- angle noma uhlangothi noma ikhoneni , isitimela sembala , isitimela sombala )
- Okokuqala uchaza uhlobo lwe-gradient negama eli- linear -gradient.
- Khona-ke, uchaza ukuqala nokuyeka amaphuzu we-gradient ngeyinye yezindlela ezimbili: i-angle yomugqa ngama-degrees ukusuka ku-0 kuya ku-359, nge-degrees ezingu-0 ekhomba ngqo. Noma ngomsebenzi "ohlangothini noma okhoneni", njengokungakwesokunxele, kwesokudla, ngezansi, nokuphezulu. Lezi zizochazwa ngokuningiliziwe ekhasini elilandelayo. Uma ushiya lokhu ngaphandle, i-gradient izogeleza kusuka phezulu kuze kube phansi kwesici.
- Khona-ke uchaza umbala wokuyeka. Uchaza umbala oyeka ngekhodi yombala kanye namaphesenti okuzithandela. Iphesenti litshela isiphequluli lapho kulayini ukuqala noma ukuphela nalolo mbala. Okuzenzakalelayo ukubeka imibala ngokulinganayo eceleni komugqa. Uzofunda kabanzi mayelana nokuyeka umbala ekhasini 3.
Ngakho, ukuchaza i-gradient engenhla nge-CSS3, ubhala:
i-line gradient (kwesokunxele, # 999999 0%, #ffffff 100%);
Futhi ukuyibeka njengesizinda se-DIV obhalayo:
div {
isithombe sangemuva: i-line gradient (kwesokunxele, # 999999 0%, #ffffff 100%;
}}
Izandiso zesiphequluli se-CSS3 Gradients Linear
Ukuze uthole i-gradient yakho isebenze isiphequluli esiphezulu, udinga ukusebenzisa izandiso zesiphequluli seziphequluli eziningi kanye nesihlungi se-Internet Explorer 9 kanye nesezansi (empeleni izihlungi ezimbili). Zonke lezi zithatha izakhi ezifanayo ukuchaza i-gradient yakho (ngaphandle kokuthi ungachaza kuphela ama-gradients amabili ombala ku-IE).
I-Microsoft Filters ne-Extension -Internet Explorer yinselele kakhulu ukusekela, ngoba udinga imigqa emithathu ehlukene ukusekela izinguqulo ezihlukene zesiphequluli. Ukuthola i-grey engenhla ibe yi-white gradient ungabhala:
/ IE 5.5-7 * /
Isihlungi: isandulela: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ IE 8-9 * /
-msms-filter: "inqubekelaphambili: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-msms-linear gradient (kwesokunxele, # 999999 0%, #ffffff 100%);
I-Mozilla Extension -I--zz- isandiso isebenza njengempahla ye-CSS3, nje nge -moz- extension. Ukuthola i-gradient engenhla ye-Firefox, bhala:
-moz-linear-gradient (kwesokunxele, # 999999 0%, #ffffff 100%);
I-Opera Extension -The -o- extension ineza ama-gradients ku-Opera 11.1+. Ukuze uthole i-gradient engenhla, bhala:
-o-linear gradient (kwesokunxele, # 999999 0%, #ffffff 100%);
I-Webkit Extension -The -webkit- extension isasebenza okuningi njengezinto ze-CSS3. Ukuchaza i-gradient ngenhla ye-Safari 5.1+ noma i-Chrome 10+ obhalayo:
-webkit-linear gradient (kwesokunxele, # 999999 0%, #ffffff 100%);
Kukhona inguqulo endala ye-extension ye-Webkit esebenza ne-Chrome 2+ ne-Safari 4+. Kuyo uchaza uhlobo lwe-gradient njengenani, kunokuthi igama lendawo. Ukuze uthole i-grey ibe yi-gradient emhlophe ngalesi sandiso, bhala:
-webkit-gradient (phezulu, phezulu kwesokunxele, phezulu kwesokudla, umbala wemoto (0%, # 999999), ukumisa umbala (100%, # ffffff));
Ikhodi ephelele ye-CSS3 Linear Gradient CSS
Ukuze uthole ukusekela okugcwele kwesiphequluli sokuthola imfucuza kumhlophe emhlophe ngaphezu kwakho kufanele kuqala ufake umbala oqinile wokubuyela emuva weziphequluli ezingasisekeli ama-gradients, futhi into yokugcina kumele ibe yisitayela se-CSS3 seziphequluli ezihambisana ngokugcwele. Ngakho, ubhala:
isizinda: # 999999;
imvelaphi: -modeli-line-gradient (kwesobunxele, # 999999 0%, #ffffff 100%);
isizinda: -webkit-gradient (phezulu, phezulu kwesobunxele, phezulu kwesokudla, umbala wembala (0%, # 999999), umbala wembala (100%, # ffffff));
isizinda: -webkit-linear gradient (kwesokunxele, # 999999 0%, #ffffff 100%);
isizinda: -o-linear gradient (kwesokunxele, # 999999 0%, #ffffff 100%);
isizinda: -msms-linear gradient (kwesokunxele, # 999999 0%, #ffffff 100%);
Isihlungi: isandulela: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-msms-filter: isandulela: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
isizinda: i-line gradient (kwesobunxele, # 999999 0%, #ffffff 100%);
Amakhasi alandelayo kulesi sihloko achaza izingxenye ze-gradient ngokuningiliziwe, futhi ikhasi lokugcina likukhomba ithuluzi eliyindlela enhle kakhulu yokudala ama-gradient e-CSS3 ngokuzenzekelayo.
Bona le gradient ehambisanayo isenzo usebenzisa CSS nje.
02 ka 04
Ukudala ama-Diagonal Gradients-I-Angle ye-Gradient
Ukuqala nokumisa amaphuzu kunquma i-angle ye-gradient. Ama-gradient amaningi ajwayelekile avela phezulu kuya phansi noma kwesobunxele kuya kwesokudla. Kodwa kungenzeka ukwakha i-gradient ehamba emgqeni ohlangene. Isithombe esisekhasini sibonisa i-gradient elula ehamba nge-angle 45 degrees ngaphesheya kwesithombe ukusuka kwesokudla kwesobunxele.
Ama-angles ukuze achaze umugqa omkhulu
I-angle yimizila engxenyeni yokucabanga phakathi nendawo. 0deg uphakamisa, amaphuzu angu-90 kuya kwesokudla, amaphuzu angu-180 ubude, namaphoyinti angu-270deg ngakwesobunxele. Ungakwazi ukuchaza noma yiliphi i-angle ukusuka ku-0 kuya ku-359 degrees.
Kumele uqaphele ukuthi esigcawini, i-angle engama-45 degree isuka ekhoneni eliphezulu ngakwesokunxele kuya kwesokudla phansi, kodwa emgqeni amaphoyinti okuqala nokuphela angaphandle kokuma, njengoba ungabona esithombeni.
Indlela ejwayelekile yokuchaza i-gradient diagonal ukuchaza ikhonji, njengokwesokudla phezulu futhi i-gradient izohamba ukusuka ekhoneni kuya ekhoneni elingezansi. Ungachaza ukuqala kokuqala ngamagama angukhiye alandelayo:
- phezulu
- kwesokudla
- phansi
- kwesokunxele
- phakathi
Futhi zingahlanganiswa ukuze zichazwe ngokwengeziwe, njenge:
- phezulu ngakwesokudla
- phezulu ngakwesokunxele
- isikhungo esiphakeme
- ngezansi ngakwesokudla
- ngezansi ngakwesokunxele
- isikhungo esiphansi
- isikhungo sokunene
- isikhungo sesokunxele
Nansi i-CSS ye-gradient efana neyodwa efanekiselwe, obomvu kuya emhlophe ehamba ukusuka ekhoneni eliphezulu ngakwesokudla kuya kwesokunxele ngezansi:
isizinda: ## 901A1C;
isithombe sangasemuva: -simo-line-gradient (phezulu kwesokudla, # 901A1C 0%, # FFFFFF 100%);
isithombe sangemuva: -webkit-gradient (elayini, phezulu kwesokudla, ngezansi kwesobunxele, umbala wembala (0, # 901A1C), umbala wembala (1, #FFFFFF));
umlando: -webkit-linear gradient (phezulu kwesokudla, # 901A1C 0%, #ffffff 100%);
isizinda: -o-linear gradient (phezulu kwesokudla, # 901A1C 0%, #ffffff 100%);
imvelaphi: -msms-linear gradient (kwesokudla phezulu, # 901A1C 0%, #ffffff 100%);
isizinda: i-line gradient (phezulu kwesokudla, # 901A1C 0%, #ffffff 100%);
Kungenzeka ukuthi uqaphele ukuthi azikho izihlungi ze-IE kulesi sibonelo. Lokhu kungenxa yokuthi i-IE ivumela kuphela izinhlobo ezimbili zezihlungi: phezulu kuya phansi (okuzenzakalelayo) futhi kwesokunxele kuya kwesokudla (nge-GradientType = 1 switch).
Bona le gradient ehambisanayo ehambisanayo usebenzisa isenzo se-CSS kuphela.
03 ka 04
Umbala uyayeka
With CSS3 gradient linear, ungakwazi ukwengeza imibala eminingi ku-gradient yakho ukuze udale ngisho nemiphumela ye-fancier. Ukwengeza le mibala, ungeza imibala eyengeziwe ekupheleni kwendawo yakho, ohlukaniswe ngama-commas. Kumele ufake phakathi emgqeni imibala kufanele iqale noma iqede futhi.
Izihlungi ze-Inthanethi Explorer zisekela kuphela imibala emibala emibili, ngakho-ke uma usakha le gradient, kufanele ufake kuphela imibala yokuqala neyesibili ofuna ukuyibonisa.
Nansi i-CSS ye-gradient engaphezulu engama-3:
isizinda: #ffffff;
imvelaphi: -mode-gradient (kwesobunxele, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
isemuva: -webkit-gradient (okulinganiselwe, phezulu kwesobunxele, phezulu phezulu, umbala wombala (0%, # ffffff), umbala wombala (51%, # 901A1C), umbala wombala (100%, # ffffff));
umlando: -webkit-linear gradient (kwesobunxele, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
umlando: -o-linear gradient (kwesobunxele, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
isizinda: -msms-line-gradient (kwesobunxele, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Isihlungi: isandulela: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
isizinda: i-line gradient (kwesobunxele, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Bona le gradient elinezigaba ezinemibala emithathu emibala esebenzisa i-CSS nje.
04 ka 04
Yenza ama-Gradients wokwakha alula
Kunezingosi ezimbili engizincomayo zokukusiza ukuba wakhe ama-gradients, ngamunye abe nezinzuzo nezinselele kuye, angizange ngithole umakhi we-gradient owenza konke okwamanje.
I-Ultimate CSS Generator Gradient
Le generator gradient ithandwa kakhulu ngoba yenza ngendlela efanayo kubakhi be-gradient ezinhlelweni ezifana ne-Photoshop. Ngiyayithanda futhi ngoba ikunika zonke izandiso ze-CSS, hhayi nje i-Webkit ne-Mozilla. Inkinga ngale generator ukuthi isekela kuphela ama-gradient angama-horizontal and vertical. Uma ufuna ukwenza ama-didial gradients, kufanele uhambe kwenye i-generator engiyincomayo.
I-CSS3 Generator Gradient
Lo jeneretha wangithatha isikhathi esincane ukuze ngiqonde kunokuqala, kodwa sisekela ukushintsha ukuqondisa kokuya.
Uma wazi ngomunye i-CSS Gradient Generator oyithandayo kangcono kunalezi, sicela usazise .