01 nke 04
Ịmepụta ndị na-eme ka Cross-Browser Linear Gradients na CSS3
Ndị na-arụ ọrụ na Linear
Ụdị gradient kachasịsịsị anya ị ga-ahụ bụ graịlị nke abụọ agba. Nke a pụtara na onye gụrụ akwụkwọ ga-agagharị n'usoro n'usoro na-agbanwe nwayọọ nwayọọ site na agba mbụ na nke abụọ tinyere akara ahụ. Ihe oyiyi dị na ibe a na-egosi nrịgo dị mfe nke aka ekpe nke # 999 (ụcha oji) ka #fff (ọcha).
Ndị gụrụ akwụkwọ na-adị mfe iji kọwaa, nweekwa nkwado kachasị na ihe nchọgharị. CSS3 linear gradients na-akwado na Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, na Safari 4+. Internet Explorer nwere ike ịgbakwunye ndị gụrụ akwụkwọ na-eji nyo ma kwado ha azụ na IE 5.5. Nke a abụghị CSS3, ma ọ bụ nhọrọ maka njikọta-cross-nchọgharị.
Mgbe ị kọwapụtara onye gụrụ akwụkwọ ị chọrọ ịkọwa ọtụtụ ihe dị iche iche:
- Kedu ụdị nke nrịrịrịrịrị ka ọ bụ - ntinye ma ọ bụ radial
- Ebe onye gụsịrị akwụkwọ ga-amalite
- Ebe onye gụsịrị akwụkwọ kwesịrị ịkwụsị
- Ụdị agba dị na gradient na ebe ha kwesịrị ịmalite ma kwụsị
Iji kọwaa klas nke akara ngosi na-eji CSS3, ị dee:
ugwo-gradient ( n'akuku ma ọ bụ akụkụ ma ọ bụ akuku , njedebe agba , njedebe agba )
- Mbụ ị kọwaa ụdị gradient na aha linear -gradient.
- Mgbe ahụ, ị kọwapụtara mmalite na nkwụsịtụ isi nke gradient na otu n'ime ụzọ abụọ: nkuku nke akara dị ogo site na 0 ruo 359, na ogo 0 ka ọ na-eche ihu. Ma ọ bụ na ọrụ "n'akụkụ ma ọ bụ n'akụkụ," dịka aka ekpe, aka nri, ala, na n'elu. A ga-akọwa ihe ndị a n'ụzọ zuru ezu na peeji na-esonụ. Ọ bụrụ na ịhapụ ndị a, onye gụsịrị akwụkwọ ga-asọ site n'elu ruo na ala nke mmewere.
- Mgbe ahụ, ị kọwaa agba na-akwụsị. Ị kọwaa na agba na-akwụsị na koodu agba na ọnụọgụ nhọrọ. Onu ogugu na-agwa onye ozo ebe onodu ga-amalite ma obu bucha na agba. Ndabere bụ ịtọye agba ya ọbụla na akara. Ị ga-amụtakwu banyere njedebe agba na ibe 3.
Ya mere, ịkọwa gradient na CSS3, ị dee:
ntinye-gradient (aka ekpe, # 999999 0%, #ffffff 100%);
Na ịtọ ya dị ka ndabere nke DIV ị dee:
na -
ndabere-oyiyi: linear-gradient (aka ekpe, # 999999 0%, #ffffff 100%;
}
Nchọgharị Nchọgharị maka CSS3 Linear Gradients
Iji nweta klas gị na-arụ ọrụ cross-nchọgharị, ịkwesịrị iji ndọtị nchọgharị maka ọtụtụ ndị nchọgharị na ntan maka Internet Explorer 9 na obere (n'ezie 2 nzacha). Ndị a nile na-ewe otu ihe ahụ iji kọwaa klas gị (ma e wezụga na ị nwere ike ịkọwapụta 2-gradients color na IE).
Ihe ntanetị na ntanetị Microsoft - Internet Explorer bụ ihe kacha sie ike ịkwado, n'ihi na ị chọrọ atọ dị iche iche iji kwado nsụgharị nchọgharị dị iche iche. Iji nweta isi awọ na-acha ọcha ka ị ga - ede:
/ * IE 5.5-7 * /
iyo: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
msgstr: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-linear-gradient (aka ekpe, # 999999 0%, #ffffff 100%);
Mozilla Extension -The -moz- extension na-arụ ọrụ dị ka CSS3 property, dị nnọọ na -moz- mgbatị. Iji nweta mpịakọta dị n'elu maka Firefox, dee:
-moz-linear-gradient (aka ekpe, # 999999 0%, #ffffff 100%);
Opera Mgbati -The-extension na- agbakwunye gradients ka Opera 11.1+. Iji nweta mpịakọta ahụ dị n'elu, dee:
-o-linear-gradient (aka ekpe, # 999999 0%, #ffffff 100%);
Mgbatị Ntanetị -The -webkit- Mgbati na-arụ ọrụ dị ka CSS3 ihe onwunwe. Iji kọwaa gradient n'elu maka Safari 5.1+ ma ọ bụ Chrome 10+ ị dee:
-onye-linear-gradient (aka ekpe, # 999999 0%, #ffffff 100%);
E nwekwara otu okenye mbipute nke Webkit ndọtị na-arụ ọrụ na Chrome 2+ na Njem Ileta Ụmụ Anụmanụ 4+. N'ime ya, ị kọwaa ụdị gradient dị ka uru, kama na aha aha. Iji nweta onye isi awọ na-acha ọcha na ndọtị a, dee:
-nkekit-gradient (ahịrị, elu aka ekpe, elu aka nri, njedebe agba (0%, # 999999), nkwụsị agba (100%, # ffffff));
Full CSS3 Linear Gradient CSS Code
Maka nkwado zuru oke-nchọgharị iji nweta isi awọ na-acha ọcha ka ị na-ebu ụzọ tinye ụda siri ike ọdịda maka ihe nchọgharị ndị na-adịghị akwado gradients, ihe ikpeazụ ga-abụ ụdị CSS3 maka ndị nchọgharị na-akwado. Ya mere, ị dee:
ndabere: # 999999;
ndabere: -moz-linear-gradient (aka ekpe, # 999999 0%, #ffffff 100%);
ndabere: -kitkit-gradient (akara, elu aka ekpe, elu aka nri, njedebe agba (0%, # 999999), njedebe agba (100%, # ffffff));
nzụlite: -kitkit-linear-gradient (aka ekpe, # 999999 0%, #ffffff 100%);
ndabere: -o-linear-gradient (aka ekpe, # 999999 0%, #ffffff 100%);
ndabere: -ms-linear-gradient (aka ekpe, # 999999 0%, #ffffff 100%);
iyo: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
ntinye: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
ndabere: linear-gradient (aka ekpe, # 999999 0%, #ffffff 100%);
Akwụkwọ ndị ọzọ na nkuzi a na-akọwa akụkụ nke onye gụrụ akwụkwọ na nkọwa ndị ọzọ, na ibe ikpeazụ ị na-echepụta ngwá ọrụ nke bụ ụzọ kachasị mma isi mepụta CSS3 gradients na akpaghị aka.
Lee ngwa akwukwo a na-eme ihe n'iji CSS.
02 nke 04
Ịmepụta ndị na-eri ihe na-acha ọbara ọbara-Angle nke Gradient
Isi mmalite na ịkwụsị ihe na-ekpebi ogo nke gradient. Ihe nrịta nrịta nke elu na-esite site n'elu rue ala ma ọ bụ aka ekpe gaa n'aka nri. Ma ọ ga-ekwe omume ịmepụta gradient na-ebugharị na akara diagonal. Ihe oyiyi dị na ibe a na-egosi otu nrịrịrịrịrị dị mfe nke na-ebugharị n'ogo 45degree n'ofe foto site n'aka nri gaa n'aka ekpe.
Mkpụrụ ihu iji kọwaa Line Line
Ogologo bu uzo n'elu ihe omuma nke di n'etiti etiti. 0deg kwadoro, 90deg na-ezo aka nri, 180deg isi ala, na 270deg isi aka ekpe. Ị nwere ike kọwapụta ọ bụla n'akuku si 0 ruo 359 degrees.
Ị kwesịrị ịdeba na na square, ogo 45 ga-esi n'akụkụ aka ekpe gaa n'akụkụ aka nri, mana na ntanetịị mmalite mmalite na njedebe dị ntakịrị n'èzí ọdịdị ahụ, dịka ị nwere ike ịhụ na oyiyi ahụ.
Ụzọ kachasị mfe isi kọwaa gradient diagonal bụ ịkọwa akụkụ, dịka n'elu aka nri na gradient ga-esi n'akụkụ ahụ gaa n'akụkụ ọzọ. Ị nwere ike ịkọwa ozi mmalite ahụ na isiokwu ndị a:
- n'elu
- nri
- ala
- n'aka ekpe
- n'etiti
A pụkwara ijikọta ha ka ha bụrụ ndị a kapịrị ọnụ, dị ka:
- n'elu nri
- elu aka ekpe
- n'elu center
- ala nri
- ala aka ekpe
- ala ala
- ebe ziri ezi
- aka ekpe
Nke a bụ CSS maka onye gụrụ akwụkwọ yiri nke ahụ, na-acha uhie uhie ka ọ na-acha ọcha site na aka nri aka nri ruo aka ekpe:
ndabere: ## 901A1C;
nzụlite-foto: -moz-linear-gradient (elu aka nri, # 901A1C 0%, # FFFFFF 100%);
nhazi ihuenyo: -kitkit-gradient (eriri, elu aka nri, aka ekpe, akara nkwụ (0, # 901A1C), njedebe (1, #FFFFFF));
nzụlite: -dịkit-linear-gradient (n'elu aka nri, # 901A1C 0%, #ffffff 100%);
ndabere: -o-linear-gradient (elu aka nri, # 901A1C 0%, #ffffff 100%);
ndabere: -ms-linear-gradient (elu aka nri, # 901A1C 0%, #ffffff 100%);
n'azụ: linear-gradient (n'elu aka, # 901A1C 0%, #ffffff 100%);
Ị nwere ike chọpụtala na ọ dịghị nzacha IE na ihe atụ a. Nke ahụ bụ n'ihi na IE na-enye ohere ụdị abụọ nzacha: n'elu gaa ala (ndabara) na aka ekpe gaa n'aka nri (na ngbanwe GradientType = 1).
Lelee gradient linear gradient in action using just CSS.
03 nke 04
Agba agba
Na CSS3 linear gradients, ị nwere ike itinye otutu agba gị gradient iji mepụta ọbụna mmetụta fancier. Iji gbakwunye agba ndị a, ị gbakwunye agba agba na njedebe nke ihe onwunwe gị, nkewapụrụ site na commas. Ikwesiri itinye ebe onodu na agba kwesiri ibido ma obu kwusi.
Nchọpụta Internet Explorer na-akwado agba abụọ, n'ihi ya, mgbe ị na-arụ akwụkwọ a, ị ga-agụnye akpa na agba abụọ ịchọrọ igosipụta.
Nke a bụ CSS maka gradient 3-agba:
ndabere: #ffffff;
ndabere: -moz-linear-gradient (aka ekpe, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
ndabere: -kitkit-gradient (eriri, elu aka ekpe, elu aka nri, njedebe agba (0%, # ffffff), njedebe (51%, # 901A1C), njedebe (100%, # ffffff));
ndabere: -kitkit-linear-gradient (aka ekpe, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
ndabere: -o-linear-gradient (aka ekpe, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
ndabere: -ms-linear-gradient (aka ekpe, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
iyo: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
ndabere: linear-gradient (aka ekpe, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Lee mmemme a na-ede akwụkwọ na agba atọ na-akwụsị n'ọrụ site na iji CSS.
04 nke 04
Mee ka ndi oru ugbo di mfe
E nwere saịtị abụọ m nwere ike ịkwado maka inyere gị aka ịmepụta ndị gụrụ akwụkwọ, onye ọ bụla nwere abamuru na ihe nzaghachi nye ha, ahụghị m onye gụrụ akwụkwọ na-eme ihe ọ bụla.
Kasị CSS Gradient Generator
Onye na-arụ ọrụ nke kredit a dị ezigbo egwu n'ihi na ọ na-eme ụdị ndị ahụ na-emepụta ihe na mmemme dị ka Photoshop. M na-amasịkwa ya n'ihi na ọ na-enye gị niile nkwupụta CSS, ọ bụghị naanị Webkit na Mozilla. Nsogbu a na generator a bụ na ọ na-akwado ndị na-eto eto na ntaneti. Ọ bụrụ na ịchọrọ ime ndị na-agụ akwụkwọ diagonal, ị ga-aga na generator ọzọ m nwere ike ikwu.
CSS3 Gradient Generator
Njikwa a na-ewe m ntakịrị oge iji ghọta karịa nke mbụ, ma ọ na-akwado na-agbanwe ntụziaka na diagonal.
Ọ bụrụ na ị maara nke ọzọ CSS Gradient Generator na ị na-amasị ka mma karịa ndị a, biko ka anyị mara .