Paglikha ng Linear Gradients ng Cross-Browser na may CSS3
Linear Gradients
Ang pinaka-karaniwang uri ng gradient makikita mo ay isang linear gradient ng dalawang kulay. Nangangahulugan ito na ang gradient ay lilipat sa isang tuwid na linya na unti-unting nagbabago mula sa unang kulay hanggang sa ikalawang linya. Ang larawan sa pahinang ito ay nagpapakita ng isang simpleng kaliwa-sa-kanan gradient ng # 999 (dark grey) sa #fff (white).
Ang mga linear gradient ay ang pinakamadaling tukuyin, at may pinakamaraming suporta sa mga browser. Ang CSS3 linear gradients ay sinusuportahan sa Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, at Safari 4+. Ang Internet Explorer ay maaaring magdagdag ng gradients gamit ang isang filter at sumusuporta sa kanila pabalik sa IE 5.5. Hindi ito CSS3, ngunit ito ay isang pagpipilian para sa compatibility ng cross-browser.
Kapag tinukoy mo ang gradient na kailangan mo upang tukuyin ang maraming iba't ibang mga bagay:
- Anong uri ng gradient ito-
linearosa hugis ng bituin - Kung saan dapat simulan ang gradient
- Kung saan dapat huminto ang gradient
- Anong mga kulay ang nasa gradient at kung saan dapat silang magsimula at huminto
Upang tukuyin ang mga linear gradient gamit ang CSS3, isulat mo ang:
linear-gradient (anggulo o gilid o sulok, hinto ng kulay, hinto ng kulay)
- Una mong tukuyin ang uri ng gradient na may pangalan
linear -Aladient. - Pagkatapos, tinutukoy mo ang simula at itigil ang mga punto ng gradient sa isa sa dalawang paraan: ang
anggulong linya sa degree na 0 hanggang 359, na may 0 degree na tumuturo tuwid up. O kaya sa function na "gilid o sulok", tulad ngkaliwa,tama,ibaba, atitaas. Ang mga ito ay ipaliwanag nang mas detalyado sa susunod na pahina. Kung iniwan mo ang mga ito, ang gradient ay dumadaloy mula sa itaas hanggang sa ilalim ng elemento. - Pagkatapos mong tukuyin ang hihinto sa kulay. Tinutukoy mo ang kulay hihinto sa code ng kulay at isang opsyonal na porsyento. Ang porsyento ay nagsasabi sa browser kung saan sa linya upang simulan o tapusin ang kulay na iyon. Ang default ay upang ilagay ang mga kulay pantay sa kahabaan ng linya. Matututunan mo ang higit pa tungkol sa mga hinto ng kulay sa pahina 3.
Kaya, upang tukuyin ang gradient sa itaas gamit ang CSS3, isulat mo ang:
linear-gradient (kaliwa, # 999999 0%, #ffffff 100%);
At itakda ito bilang background ng isang DIV isulat mo:
div {background-image: linear-gradient (kaliwa, # 999999 0%, #ffffff 100%;} Mga Extension ng Browser para sa CSS3 Linear Gradients
Upang makuha ang iyong gradient upang gumana ang cross-browser, kailangan mong gumamit ng mga extension ng browser para sa karamihan ng mga browser at a filter para sa Internet Explorer 9 at mas mababa (talagang 2 filter). Ang lahat ng mga ito ay gumawa ng parehong mga elemento upang tukuyin ang iyong gradient (maliban na maaari mo lamang tukuyin ang 2-kulay gradients sa IE).
Microsoft Filter at Extension-Internet Explorer ang pinaka mahirap na suportahan, dahil kailangan mo ng tatlong magkakaibang linya upang suportahan ang iba't ibang mga bersyon ng browser. Upang makuha ang nasa itaas na grey sa puting gradient nais mong isulat:
/ * IE 5.5-7 * /filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);/ * IE 8-9 * /-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";/ * IE 10 * /-ms-linear-gradient (kaliwa, # 999999 0%, #ffffff 100%);
Mozilla Extension-Ang -moz- Ang extension ay gumagana tulad ng CSS3 na ari-arian, lamang sa -moz- extension. Upang makuha ang gradient sa itaas para sa Firefox, isulat ang:
-moz-linear-gradient (kaliwa, # 999999 0%, #ffffff 100%);
Extension ng Opera-Ang -o- Nagdaragdag ang extension ng gradients sa Opera 11.1+. Upang makuha ang gradient sa itaas, isulat ang:
-o-linear-gradient (kaliwa, # 999999 0%, #ffffff 100%);
Webkit Extension-Ang -webkit- Ang extension ay gumagana ng maraming tulad ng CSS3 ari-arian. Upang tukuyin ang gradient sa itaas para sa Safari 5.1+ o Chrome 10+ isulat mo:
-webkit-linear-gradient (kaliwa, # 999999 0%, #ffffff 100%);
Mayroon ding mas lumang bersyon ng extension ng Webkit na gumagana sa Chrome 2+ at Safari 4+. Sa ito ay tinutukoy mo ang uri ng gradient bilang isang halaga, sa halip na sa pangalan ng ari-arian. Upang makuha ang grey sa puting gradient gamit ang extension na ito, isulat ang:
-webkit-gradient (linear, kaliwa tuktok, kanang tuktok, kulay-stop (0%, # 999999), kulay-stop (100%, # ffffff)); Buong CSS3 Linear Gradient CSS Code
Para sa buong suporta ng cross-browser upang makuha ang grey to white gradient sa itaas dapat mo munang isama ang isang solidback na kulay para sa mga browser na hindi sumusuporta sa gradients, at ang huling item ay dapat na estilo ng CSS3 para sa mga browser na ganap na sumusunod. Kaya, sumulat ka:
background: # 999999;background: -moz-linear-gradient (kaliwa, # 999999 0%, #ffffff 100%);background: -webkit-gradient (linear, kaliwa tuktok, kanang tuktok, kulay-stop (0%, # 999999), kulay-stop (100%, # ffffff));background: -webkit-linear-gradient (kaliwa, # 999999 0%, #ffffff 100%);background: -o-linear-gradient (kaliwa, # 999999 0%, #ffffff 100%);background: -ms-linear-gradient (kaliwa, # 999999 0%, #ffffff 100%);filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);background: linear-gradient (kaliwa, # 999999 0%, #ffffff 100%);
Ang susunod na mga pahina sa tutorial na ito ay nagpapaliwanag ng mga bahagi ng isang gradient nang mas detalyado, at ang huling pahina ay tumuturo sa iyo sa isang tool na isang mahusay na paraan upang lumikha ng mga gradient ng CSS3 awtomatikong.
Tingnan ang linear na gradient na ito sa pagkilos gamit ang CSS lang.
02 ng 04Paglikha ng Diagonal Gradients-Ang Anggulo ng Gradient
Ang simula at itigil ang mga puntos na matukoy ang anggulo ng gradient. Karamihan sa mga linear gradient ay mula sa itaas hanggang sa ibaba o pakaliwa sa kanan. Ngunit ito ay posible na bumuo ng isang gradient na gumagalaw sa isang dayagonal na linya. Ang imahe sa pahinang ito ay nagpapakita ng isang simpleng gradient na gumagalaw sa isang 45 degree na anggulo sa buong imahe mula sa kanan papuntang kaliwa.
Mga anggulo upang Tukuyin ang Gradient Line
Ang anggulo ay isang linya sa isang haka-haka bilog sa gitna ng elemento. 0deg tumuturo, 90deg tumuturo sa kanan, 180deg tumuturo, at 270deg tumuturo sa kaliwa. Maaari mong tukuyin ang anumang anggulo mula 0 hanggang 359 degrees.
Dapat mong tandaan na sa isang parisukat, ang isang anggulo ng 45 degree na gumagalaw mula sa itaas na kaliwang sulok sa kanang ibaba, ngunit sa isang rektanggulo ang mga panimula at dulo ng mga puntos ay bahagyang sa labas ng hugis, tulad ng makikita mo sa larawan.
Ang mas karaniwang paraan upang tukuyin ang isang diagonal gradient ay upang tukuyin ang isang sulok, tulad ng itaas na kanan at ang gradient ay lilipat mula sa sulok na iyon hanggang sa sulok na sulok. Maaari mong tukuyin ang panimulang posisyon sa mga sumusunod na keyword:
- itaas
- tama
- ibaba
- kaliwa
- gitna
At maaari silang maisama upang maging mas tiyak, tulad ng:
- itaas na kanan
- itaas na kaliwa
- top center
- kanang ibaba
- babang kaliwa
- ibaba center
- kanan center
- kaliwa center
Narito ang CSS para sa isang gradient na katulad ng isa na nakalarawan, pula sa puting paglipat mula sa itaas na kanang sulok hanggang sa kaliwang ibaba:
background: ## 901A1C;background-image: -moz-linear-gradient (kanang tuktok, # 901A1C 0%, # FFFFFF 100%);background-image: -webkit-gradient (linear, kanang itaas, kaliwang ibaba, kulay-stop (0, # 901A1C), kulay-stop (1, #FFFFFF));background: -webkit-linear-gradient (kanang tuktok, # 901A1C 0%, #ffffff 100%);background: -o-linear-gradient (kanang itaas, # 901A1C 0%, #ffffff 100%);background: -ms-linear-gradient (kanan itaas, # 901A1C 0%, #ffffff 100%);background: linear-gradient (kanang tuktok, # 901A1C 0%, #ffffff 100%);
Maaaring napansin mo na walang IE filter sa halimbawang ito. Iyon ay dahil pinapayagan lamang ng IE ang dalawang uri ng mga filter: itaas hanggang sa ibaba (ang default) at pakaliwa sa kanan (kasama ang GradientType = 1 lumipat).
Tingnan ang diagonal na linear na gradient sa pagkilos gamit ang CSS lang.
03 ng 04Kulay ng Paghinto
Sa CSS3 linear gradients, maaari kang magdagdag ng maramihang mga kulay sa iyong gradient upang lumikha ng kahit na mas interesante effect. Upang idagdag ang mga kulay na ito, magdagdag ka ng mga karagdagang kulay sa dulo ng iyong ari-arian, na pinaghihiwalay ng mga kuwit. Dapat mong isama kung saan sa linya ang mga kulay ay dapat magsimula o magtapos pati na rin.
Sinusuportahan lang ng mga filter ng Internet Explorer ang dalawang hinto ng kulay, kaya kapag nagtatayo ka ng gradient na ito, dapat mo lamang isama ang una at pangalawang kulay na nais mong ipakita.
Narito ang CSS para sa gradient 3-kulay sa itaas:
background: #ffffff;background: -moz-linear-gradient (kaliwa, #ffffff 0%, # 901A1C 51%, #ffffff 100%);background: -webkit-gradient (linear, kaliwa tuktok, kanang tuktok, kulay-stop (0%, # ffffff), kulay-stop (51%, # 901A1C), kulay-stop (100%, # ffffff));background: -webkit-linear-gradient (kaliwa, #ffffff 0%, # 901A1C 51%, #ffffff 100%);background: -o-linear-gradient (kaliwa, #ffffff 0%, # 901A1C 51%, #ffffff 100%);background: -ms-linear-gradient (kaliwa, #ffffff 0%, # 901A1C 51%, #ffffff 100%);filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);background: linear-gradient (kaliwa, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
Tingnan ang linear na gradient na may tatlong kulay na hinto sa pagkilos gamit ang CSS lamang.
04 ng 04Gawing mas madali ang Building Gradients
Mayroong dalawang mga site na inirerekumenda ko sa pagtulong sa iyo na bumuo ng gradients, ang bawat isa ay may mga benepisyo at mga drawbacks sa kanila, hindi ko nakita ang isang gradient builder na ang lahat ng bagay pa.
Ultimate CSS Gradient GeneratorAng gradient generator na ito ay napaka-tanyag dahil ito ay gumaganap sa isang katulad na paraan upang ang mga tagabuo ng gradient sa mga program tulad ng Photoshop. Gusto ko rin ito dahil binibigyan ka nito ang lahat ng mga extension ng CSS, hindi lamang ang Webkit at Mozilla. Ang problema sa generator na ito ay sinusuportahan lamang nito ang mga horizontal at vertical gradient. Kung nais mong gawin ang mga diagonal gradients, kailangan mong pumunta sa ibang generator ko inirerekomenda. CSS3 Gradient GeneratorDinala ako ng generator na ito ng kaunti pa upang maunawaan kaysa sa una, ngunit sinusuportahan nito ang pagpapalit ng direksyon sa isang dayagonal. Kung alam mo ang isa pang CSS Gradient Generator na mas gusto mo kaysa sa mga ito, mangyaring ipaalam sa amin.
