01 ngo 04
Ukudala i-Cross-Browser Linear Gradients ngeCSS3
Gradients Linear
Uhlobo oluqhelekileyo lwe-gradient uya kubona i-gradient linear imibala emibili. Oku kuthetha ukuba i-gradient iya kuhamba ngomgca ochanekileyo uguquka ngokuthe ngqo ukusuka kumbala wokuqala ukuya kweyesibini kumgca. Umfanekiso kweli khasi ubonisa i-gradient elula ye-# 999 (i-gray gray) ukuya kwi-#fff (emhlophe).
Iiladididi ezidibeneyo zilula ukuchaza, kwaye zinenkxaso enkulu kwiibrowser. I-CSS3 gradients linear ixhaswa kwi-Android 2.3+, i-Chrome 1+, i-Firefox 3.6+, i-Opera 11.1+ kunye ne-Safari 4+. I-Internet Explorer ingongeza ii-gradients usebenzisa i-filter kwaye iwaxhasa kwakhona kwi-IE 5.5. Oku akusiyo i-CSS3, kodwa kuyindlela yokhetho oluhambelanayo nesiphequluli.
Xa uchaza i-gradient kufuneka uchaze izinto ezahlukeneyo:
- Luhlobo luni lwe-gradient lugqityiweyo okanye oluqhelekileyo
- Apho i-gradient ifanele iqale
- Apho i-gradient kufuneka ime
- Yimiphi imibala ekhoyo kwi-gradient kunye nalapho kufuneka iqale kwaye iqale
Ukuchaza ama-gradient linear usebenzisa i-CSS3, ubhala:
i-gradient-line ( angle okanye kwicala okanye ikona , i- color stop , umbala wokuma )
- Okokuqala uchaza uhlobo lwegradient negama eli- linear -gradient.
- Emva koko, uchaza ukuqala nokuyeka amanqaku e-gradient kwelinye leendlela ezimbini: i-angle yomgca kwidigri ukusuka kwi-0 ukuya ku-359, ngee-0 degrees ezikhomba ngqo. Okanye kunye nomsebenzi "ohlangothini okanye wekona", njengasekhohlo, kwesokudla, ngaphantsi, nangaphezulu. Ezi ziya kuchazwa ngokubanzi kwiphepha elilandelayo. Ukuba uyishiya la ngaphandle, i-gradient iya kuphuma ukusuka phezulu ukuya ngasezantsi kwento.
- Emva koko uchaza umbala oyekayo. Uchaza umbala uyeka ngekhowudi yombala kunye nepesenti ezikhethiweyo. Ipesenti ichaza isiphequluli apho kumgca ukuqala okanye ukuphela nombala. Okungagqibekanga kukubeka imibala ngokulinganayo kumgca. Uza kufunda ngakumbi malunga nokuyeka kwemibala kwiphepha 3.
Ngoko, ukuchaza isalathisi esingentla apha ngeCSS3, ubhala:
i-gradient (ekhohlo, # # 999999 0%, #ffffff 100%);
Futhi ukuyibeka njengemvelaphi ye-DIV obhalayo:
div {
umfanekiso wesemva: i-gradient line (esele, # 999999 0%, #ffffff 100%;
}
Izandiso zeSiphequluli zeCSS3 Gradients Linear
Ukuze ufumane i-gradient yakho isebenze isiphequluli esiphambeneyo, kufuneka usebenzise izandiso zesiphequluli kwiibrowser ezininzi kunye nefayile kwi-Internet Explorer 9 kunye nezantsi (impela izihlunu ezi-2). Zonke ezi zinto zithatha izinto ezifanayo ukuchaza i-gradient yakho (ngaphandle kokuba unokuchaza kuphela i-gradients 2-color in IE).
I-Microsoft Filters kunye ne-Extension -Internet Explorer inzima kakhulu ukuxhasa, kuba ufuna imigca emithathu eyahlukileyo ukuxhasa iinguqulelo ezahlukeneyo zeenguqulelo. Ukufumana i-gray engentla kwi-gradient emhlophe ungabhala:
/ * IE 5.5-7 * /
Ifayile: iprojekthi: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-ms-filter: "iprogram: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-gradient-gradient (ezantsi, # 999999 0%, #ffffff 100%);
I-Mozilla Extension -The -moz- extension isebenza njengepropati ye-CSS3, kunye ne--moz- extension. Ukufumana i-gradient engentla ye-Firefox, bhala:
-mz-linear gradient (ezantsi, # 999999 0%, #ffffff 100%);
I-Opera Extension -The -o extension yongeza ama-gradients kwi-Opera 11.1+. Ukufumana i-gradient engentla, bhala:
-o-linear gradient (ezantsi, # 999999 0%, #ffffff 100%);
I-Webkit Extension -I -webkit- extension isasebenza kakhulu njengepropati yeCSS3. Ukuchaza isalathisi esingentla apha kwi-Safari 5.1+ okanye i-Chrome 10+ obhalayo:
-wibkit-linear gradient (ezantsi, # 999999 0%, #ffffff 100%);
Kukho ingxelo endala ye-Webkit extension eyenza i-Chrome 2+ kunye ne-Safari 4+. Kuyo uchaza uhlobo lwegradient njengexabiso, kunokuba ligama lepropati. Ukufumana i-grey kwi-gradient emhlophe ngolu hlobo, bhala:
-webkit-gradient (umgca, umgca wesobunxele, umgangatho wesokudla, umgca wembala (0%, # 999999), ukuma umbala (100%, # ffffff));
Ikhowudi epheleleyo yeCSS3 ye-Gradient CSS Code
Ukuxhaswa kwe-browser-cross full ukuze uthole i-gray kwi-gradient emhlophe ngaphaya kwakho kufuneka kuqala ufake umbala oqinileyo we-browsback ongaxhasi ama-gradients, kwaye into yokugqibela kufuneka ibe yindlela yeCSS3 yeziphequluli ezihambelana ngokupheleleyo. Ngoko, ubhala:
imvelaphi: # 999999;
imvelaphi: -moz-linear gradient (ezantsi, # 999999 0%, #ffffff 100%);
imvelaphi: -webkit-gradient (umgca, umgca wesobunxele, umgangatho ophezulu, umgca wemibala (0%, # 999999), ukumisa umbala (100%, # ffffff));
imvelaphi: -webkit-linear gradient (ezantsi, # 999999 0%, #ffffff 100%);
imvelaphi: -o-linear gradient (ezantsi, # 999999 0%, #ffffff 100%);
imvelaphi: -msom-gradient (ekhohlo, # 999999 0%, #ffffff 100%);
Ifayile: iprojekthi: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: proquid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
imvelaphi: i-gradient line (ekhohlo, # 999999 0%, #ffffff 100%);
Amaphepha alandelayo kule khokelo achaza iingxenye zegradient ngokubanzi, kwaye iphepha lokugqibela likukhomba kwisixhobo esona ndlela efanelekileyo yokudala i-CSS3 i-gradients ngokuzenzekelayo.
Jonga lo mgca wendlela osebenzayo usebenzisa iCSS kuphela.
02 we 04
Ukudala i-Diagonal Gradients-I-Angle ye-Gradient
Ukuqala nokuyeka amanqaku kumisela i-angle ye-gradient. Amanqanaba amaninzi afanayo aphezulu ukusuka phezulu ukuya ngasezantsi okanye ngasekhohlo ukuya kwesokudla. Kodwa kunokwenzeka ukwakha i-gradient ehamba kumgca wokudibanisa. Umfanekiso kweli khasi ubonisa i-gradient elula ehamba ngecala elingama-45 ukuya ngaphesheya komfanekiso ukusuka kwesokudla ukuya kwesobunxele.
IiNgqungquthela ukuchaza uMgca weGradient Line
I-angle iyona mgca kwisangqa esicangayo phakathi kwendawo. 0deg ubeka phezulu, amanqaku angama 90deg ngakwesokudla, ama-180 degg apha, kunye namaqondo angama-270deg ngakwesobunxele. Ungachaza nayiphi na i-angle ukusuka kwi-0 ukuya kwi-359 degrees.
Kufuneka uqaphele ukuba kwinqanaba, i-angle ye-45 degree ihamba ukusuka ekhoneni eliphezulu ngakwesobunxele ukuya ngasekunene, kodwa kwirexeni ukuqala nokugqitywa kwamaphuzu kuncinane ngaphandle kobunzima, njengoko ubona kumfanekiso.
Indlela eqhelekileyo yokuchaza isalathisi esichaphazelekayo kukuchaza ikhoneni, njengelungelo eliphezulu kwaye i-gradient iya kusuka kwinqona ukuya kwelinye icala. Ungachaza ukuqala kokuqala ngala magama alandelayo:
- phezulu
- kunene
- ngezantsi
- khohlo
- kwiziko
Kwaye zinokudibaniswa zibe zichaneke ngakumbi, njenge:
- phezulu phezulu
- phezulu kwesobunxele
- kwiziko eliphezulu
- ngaphantsi kwesokudla
- ngaphantsi kwesobunxele
- ephantsi
- kwindawo efanelekileyo
- ekhohlo
Nantsi i-CSS yegradient efana neyokufanekisa, obomvu ukuya kumhlophe uhamba ukusuka ekhoneni eliphezulu ngasekunene ngakwesobunxele:
imvelaphi: ## 901A1C;
umfanekiso-mvelaphi: -moz-linear gradient (phezulu phezulu, # 901A1C 0%, # FFFFFF 100%);
umfanekiso ongasemva: -webkit-gradient (umgca, phezulu, ngasekhohlo ngasekhohlo, ukuma umbala (0, # 901A1C), ukuyeka umbala (1, #FFFFFF));
imvelaphi: -webkit-linear gradient (phezulu phezulu, # 901A1C 0%, #ffffff 100%);
imvelaphi: -o-linear gradient (phezulu phezulu, # 901A1C 0%, #ffffff 100%);
imvelaphi: -msom-gradient (ephezulu phezulu, # 901A1C 0%, #ffffff 100%);
imvelaphi: i-gradient engqamle (ephezulu phezulu, # 901A1C 0%, #ffffff 100%);
Usenokuba uqaphele ukuba akukho zixhobo ze-IE kule mzekelo. Kungenxa yokuba i-IE ivumela kuphela iintlobo ezimbini zezihlungi: phezulu ukuya ngaphantsi (okungekho phantsi) kwaye ushiye ngakwesokudla (nge-GradientType = 1 switch).
Jonga lo mgca odibeneyo osebenzayo usebenzisa iCSS kuphela.
03 we 04
Umbala uyayeka
Nge-CSS3 i-gradients linear, ungongeza imbala emininzi kwi-gradient yakho ukuze udale nemiphumo ye-fancier. Ukongeza le mibala, ungeze imibala eyongezelelweyo ekupheleni kwepropati yakho, eyahlukana ngama-commas. Kufuneka uquke apho kumgca imibala ifanele iqale okanye iphele.
Iifayile ze-Internet Explorer zixhasa kuphela imibala emibala emibini, ngoko xa ukwakha le gradient, kufuneka uquke kuphela imibala yokuqala kunye yesibini ofuna ukuyibonisa.
Nantsi iCSS ye-3-color gradient engentla:
imvelaphi: #ffffff;
imvelaphi: -mz-linear gradient (esele, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
imvelaphi: -webkit-gradient (umgca, umgca wesobunxele, u-top-right, u-color-stop (0%, # ffffff), ukuma umbala (51%, # 901A1C), ukuma umbala (100%, # ffffff));
imvelaphi: -webkit-linear gradient (esele, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
imvelaphi: -o-linear gradient (kwesobunxele, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
imvelaphi: -msms-linear gradient (kwesobunxele, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
ukucoca: iprojekthi: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
imvelaphi: i-gradient (ekhohlo, i-#ffffff 0%, # 901A1C 51%, # ffffff 100%);
Jonga le gradient linear eneembala ezintathu zokuyeka isenzo usebenzisa iCSS kuphela.
04 we 04
Yenza iZakhiwo zeZakhiwo zilula
Kukho iindawo ezimbini endincomayo ukuncedisa ukwakha amadidididi, ngamnye unokufumana izibonelelo kunye neengxaki kuye, andizange ndifumene umakhi womgca owenza konke okwamanje.
I-Generic CSS Gradient Generator
Eli jenereji ye-gradient ithandwa kakhulu kuba yenza ngendlela efana neyabakhi be-gradient kwiinkqubo ezifana ne-Photoshop. Ndiyathanda kwakhona kuba inika zonke izandiso ze-CSS, kungekhona nje iWebkit ne-Mozilla. Ingxaki ngale jenerethi kukuba isekela kuphela ama-gradients angama-horizontal and vertical gradients. Ukuba ufuna ukwenza ama-gradient diagonal, kufuneka uhambe kwenye i-generator endiyincomayo.
I-CSS3 iGridiyator Gradient
Lo jeneretha wandithatha ixesha elincinane ukuba ndiqonde kunowokuqala, kodwa lusekela ukutshintsha isalathiso kwi-diagonal.
Ukuba uyazi enye i-CSS Gradient Generator oyithandayo kangcono kunoko, nceda usazise .