01 o 04
Ke hanaʻana i nā kākoʻo Linear Pūnaewele Pūnaewele me CSS3
Nā Kuleana Linear
ʻO ka'eneʻenepine maʻamau o ka'eneʻalima eʻikeʻoe he māka laina oʻelua mau lelo. ʻO keʻano o ka māmā e hoʻololi i ka loli pololei i ka loli mua i ka lua ma ia laina. Aia ke kiʻi ma kēiaʻaoʻao i kahi mālie hema-hema aʻoi o # 999 (hina hina) i #fff (keʻokeʻo).
ʻO nā laikini linear ka mea maʻalahi loa e wehewehe, a iā lākou ke kākoʻo nui loa i nā polokalamu kele pūnaewele. Hoʻokomoʻia nā lālā CSS3 i ka Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, a me Safari 4+. Hiki i ka polokalamu Internet Explorer ke hoʻohui i nā lālā ma ka hoʻohanaʻana i kahi kānana a kākoʻo iā lākou i IE 5.5. ʻAʻole kēia CSS3, akā he koho ia no ka laulima cross-browser.
Ke weheweheʻoe i kahi mālie e ponoʻoe e ho'ākāka i nā mea likeʻole:
- He aha keʻano o ka māʻonaʻo ia he linear a iʻole ka hili
- Kahi e hoʻomaka ai ka mīkini
- Ma kahi e kū ai ke kime
- ʻO nāʻano keleʻele i ka māʻalima a me kahi e hoʻomaka ai a kū
No ka ho'ākākaʻana i nā leka laina laina me ka hoʻohanaʻana i ka CSS3, e kākauʻoe:
linear-gradient (ke kihi a iʻole kaʻaoʻao aiʻole ke kihi , kaʻae kala , kaʻaeʻana )
- ʻO ka mua, weheweheʻoe i keʻano o ka māʻiko me ka laina linear -hua.
- A laila, wehewehe i nā mākuhi a me nā pani o ka māʻeli ma kekahi o nā alaʻelua: ke kihi o ka laina ma ke kekona mai ka 0 a 359, me ka helu 0 nā kikoo pololei. A iʻole me ka hana "ʻaoʻao aʻaoʻao paha", e like me ka hema,'ākau, lalo, a me luna. E weheweheʻia kēia mau mea ma kaʻaoʻao aʻe. Inā haʻaleleʻoe i kēia, e kahe ka māmā mai ka luna a hiki i lalo o ka mea.
- A laila weheweheʻoe i nā pani kala. Ho'ākākaʻoe i ka pauʻana o nā kala me ka helu kala a me ka hoʻokele koho. ʻO ka pākēneka ka mea eʻike ai i ka pūnaewele kahi ma ka laina e hoʻomaka a iʻole e pau me kēlāʻano. ʻO ka paʻakikī,ʻo ia ke kau i nā kala i ka laina a me ka laina. E aʻo houʻoe e pili ana i nā pani kala i kaʻaoʻao 3.
No laila, e ho'ākāka i ka mākau kiʻekiʻe ma CSS3, e kākauʻoe:
linear-gradient (hema, # 999999 0%, #ffffff 100%);
A no ka hoʻonohonohoʻana e like me ka moʻolelo o ka DIV e kākauʻoe:
hoʻokaʻawale '
ʻike hope-kiʻi: linear-gradient (hema, # 999999 0%, #ffffff 100%;
}
Nā Hōʻoia Pūnaewele no ka CSS3 Linear Gradients
No ka loaʻaʻana o kāu mikike e hana i ka cross-browser, ponoʻoe e hoʻohana i nā hoʻopihapiha pūnaewele no ka nui o nā polokalamu kele pūnaewele a me kahi kānana no Internet Explorer 9 a me lalo (ʻoiaʻiʻo 2 mau kānana). Lawe kēia mau mea a pau i nāʻano likeʻole e ho'ākāka i kou mākona (koe wale nō hiki iāʻoe ke hoʻohālikelike i nā lākiō 2-i ka IE).
ʻO ka meaʻoi aku ka paʻakikī loa e kākoʻo iāʻoe, no ka mea, ponoʻoe iʻekolu mau laina likeʻole no ke kākoʻoʻana i nā pūnaewele polokalamu'ē aʻe. No ka loaʻaʻana o ka hinaʻeleʻele i ka mākeʻeke ke kākauʻoe:
/ * IE 5.5-7 * /
hoʻopili: 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 (hema, # 999999 0%, #ffffff 100%);
Nā Mozilla Extension -The -moz-ʻoihana hoʻolālā e like me ka waiwai CSS3, me ka hoʻonuiʻana -moz. No ka loaʻaʻana o ka gradient i luna no Firefox, e kākau:
-moz-linear-gradient (hema, # 999999 0%, #ffffff 100%);
Hoʻonuiʻia kaʻOpera Extension -The - extension hoʻonui i ka gradients iʻOpera 11.1+. No ka loaʻaʻana o ka gradient i luna, e kākau:
-o-linear-gradient (hema, # 999999 0%, #ffffff 100%);
Hoʻonui ka hoʻopau pūnaewele -The -webkit-extension e like me ka waiwai CSS3. No ka ho'ākākaʻana i ka gradient o luna no Safari 5.1+ a iʻole Chrome 10+ kākauʻoe:
-ockit-linear-gradient (hema, # 999999 0%, #ffffff 100%);
Aia kekahi ma mua o ka pūnaewele pūnaewele e hana nei me Chrome 2+ a me Safari 4+. I loko o ia mea, weheweheʻoe i keʻano o ka liʻiliʻi ma keʻano he waiwai, ma mua o ka inoa waiwai. No ka loaʻaʻana o ke oho hina i ka māʻali keʻokeʻo me kēia kauʻana, e kākau:
-ockit-gradient (laina laina, luna hema, luna'ākau, pale-āpau (0%, # 999999), kaʻalohi-pale (100%, # ffffff));
Kānāwai CSS3 Kēkelē Laeoʻo Ced
No ke kākoʻoʻokoʻa pūnaewele holomua e loaʻa ai ka hina i ka mālie keʻokeʻo ma luna o kāu pono e hoʻokomo mua i kahi laulā paʻakikī no ka meaʻikeʻole i nā'ōpena, aʻo ka mea hope loa e pono keʻano CSS3 no nā mea nānā. No laila, kākauʻoe:
moʻolelo: # 999999;
kumu: -moz-linear-gradient (hema, # 999999 0%, #ffffff 100%);
Kūlana: -hawaikit-gradient (laina laina, luna hema, luna'ākau, pale-kapu (0%, # 999999), kaʻalohi-kapu (100%, # ffffff));
Papaliʻa: -e holowai-linear-gradient (hema, # 999999 0%, #ffffff 100%);
ke kumu: -o-linear-gradient (hema, # 999999 0%, #ffffff 100%);
kumu: -ms-linear-gradient (hema, # 999999 0%, #ffffff 100%);
hoʻopili: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
ke kumu: linear-gradient (hema, # 999999 0%, #ffffff 100%);
ʻO nāʻaoʻao hou aʻe o kēia kumu aʻo e wehewehe i nā māhele o ka mea māʻiko i nā kiko'ī, aʻo kaʻaoʻao hope e kuhikuhi ana iāʻoe i kahi mea hana hana maikaʻi loa i ka hanaʻana i ka CSS3 māmā.
Eʻike i kēia gradient linear i ka hana ma o CSS wale nō.
02 o 04
Kāluaʻana i nā Kānā Laukona -ʻO ka Angle o ka Gradient
ʻO ka hoʻomaka a hoʻokuʻu i nā helu eʻike i ka angle o ka māʻiko. ʻO ka hapa nui o nā lālā linear mai kahi kiʻekiʻe ai lalo aiʻole hema a hiki i ka'ākau. Akā hiki ke kūkulu i kahi līlī e neʻe ai i kahi laina diagonal. ʻO ke kiʻi ma kēiaʻaoʻao e hōʻike ana i kahi māmā māmā e neʻe i kahi kihi 45degree ma'ō aku o ka kiʻi mai ka'ākau a me kaʻaoʻao hema.
Nā Angles e Hoʻokō i ka Laina Māmā
ʻO ka laina he laina ia ma kekahi mahele hoʻomanaʻo i waenakonu o ka mea. 0eg i luna, 90deg mau i ka'ākau, 180deg mau lalo i lalo, a me nā helu 270deg i ka hema. Hiki iāʻoe ke ho'ākāka i kekahi kihi mai ka 0 a 359 kekona.
Pono e hoʻomaopopo i ke kiʻikuhi, he 45 degree angle e neʻe ai mai ke kihi hema a hiki i lalo, akā ma ka'āpana'ākau, he paku ke kumu hoʻomaka a me nā hopena ma waho o keʻano, e like me kāu eʻike ai ma ke kiʻi.
ʻO ka mea maʻamau e wehewehe i kahi'ākelō diagonalʻo ka ho'ākākaʻana i kahi kihi, e like me ka'ākau i luna a me ka māʻiko e neʻe ai mai kēlā kihi a ke kihi. Hiki iāʻoe ke ho'ākāka i ka leka hoʻomaka me nā hua'ōlelo hou:
- i luna
- akau
- lalo
- hema
- kikowaena
A ua hiki ke hoʻohuiʻia iā lākou eʻoi aku ke kiko'ī, e like me:
- ʻO ka'ākau kiʻekiʻe
- i luna hema
- ke kikowaena waena
- raro lalo
- lalo hema
- ka waena lalo
- ke kikowaena pololei
- ka waena hema
Eia ka CSS no kahi māmā like me ka mea iʻikeʻia, heʻulaʻula keʻokeʻo mai ka'ākau a luna i ka'ākau hema:
moʻolelo: ## 901A1C;
ʻike hope-kiʻi: -moz-linear-gradient (luna kiʻekiʻe, # 901A1C 0%, # FFFFFF 100%);
Kūlana kiʻi: -hawaikit-gradient (laina laina,'ākau'ākau, lalo hema,ʻaʻohe-āpau (0, # 901A1C), kahi pāʻani (1, #FFFFFF));
ke kumuhana: -hawaikit-linear-gradient (luna kiʻekiʻe, # 901A1C 0%, #ffffff 100%);
ke kumu: -o-linear-gradient (luna kiʻekiʻe, # 901A1C 0%, #ffffff 100%);
ke kumu: -ms-linear-gradient (luna kiʻekiʻe, # 901A1C 0%, #ffffff 100%);
ke kumu: linear-gradient (luna kiʻekiʻe, # 901A1C 0%, #ffffff 100%);
Uaʻike pahaʻoeʻaʻoleʻae i nā kānana IE i kēiaʻano. ʻO ia wale nōʻo IE wale nō e hāʻawi i nāʻano kānanaʻelua:ʻo luna i lalo (ka paʻamau) a me ka hema i ka'ākau (me kaʻikeʻana GradientType = 1).
Eʻike i kēia gradient linear i ka hana ma o CSS wale nō.
03 o 04
Kūkuʻi Stopo
Me nā CSS3 mau lālā linear, hiki iāʻoe ke hoʻonui i nā lauʻeleʻele i kāu mikiki e hana ai i nā hopena'ākau. No ka hoʻohuiʻana i kēia mauʻili, hoʻohuiʻoe i nā kala'ē aʻe i ka hopena o kāu waiwai, i hoʻokaʻawaleʻia e nā pākuhi. Ponoʻoe e hoʻokomo i ka wahi ma ka laina e hoʻomaka a hopena paha nā kala.
Hiki i nā polokalamu Internet Explorer wale ke kākoʻo i nā kuʻiʻelua, no laila, i ka wā e kūkulu aiʻoe i kēia gradient, ponoʻoe e hoʻokomo wale i nā lālani mua a me kaʻelua āu e makemake ai e hōʻike.
Eia ka CSS no ka gradient 3-lahi.
ʻikepili: #ffffff;
kumu: -moz-linear-gradient (hema, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
Kūlana: -hawaikit-gradient (laina laina, luna hema,'ākau'ākau, pale-āpau (0%, # ffffff), kahi pālahalaha (51%, # 901A1C), kahi pālahalaha (100%, # ffffff));
Papaliʻi: -e holowai-linear-gradient (hema, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
ke kumu: -o-linear-gradient (hema, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
kumu: -ms-linear-gradient (hema, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
hoʻopili: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
kuhi: linear-gradient (hema, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Eʻike i kēia māka laina meʻekolu mau kala i ka hana ma o CSS wale nō.
04 o 04
Makemake i nā mea hana maʻalahi
ʻElua kahua kahi aʻu e'ōlelo ai no ke kōkuaʻana iāʻoe e kūkulu i nā lālā, loaʻa iā lākou he mau pōmaikaʻi a me nā hanana hou iā lākou,ʻaʻole i loaʻa iaʻu kahi mea hoʻokumu uʻi hana i nā mea a pau.
Ka meaʻoi aku CSS Gradient Generator
He mea kaulana loa kēia pūnaewele gradient no ka hanaʻana i keʻano like me nā mea hana i ka gradient i nā polokalamu e like me Photoshop. Makemake au i ke kumu no ka hāʻawiʻana iāʻoe i nā hōʻailona CSS,ʻaʻole wale wale nō i ka Palapala Kiʻi a Mozilla. ʻO ka pilikia me kēia pūnaeweleʻo ia wale nō ka mea e kākoʻo i nā lālā kūʻokoʻa a me ke kaulike. Inā makemakeʻoe e hana i nā'onike diagonal, ponoʻoe e hele i kahi pūnaewele'ē aʻe aʻu e paipai nei.
CSS3 Pūnaewele Palena
Ua hoʻokuʻu kēia pūnaewele iaʻu i mea e maopopo ai ma mua o ka mea mua, akā, ua kākoʻo ka hoʻololiʻana i ka kuhikuhi i kahi diagonal.
Ināʻikeʻoe i kekahi CSS Gradient Generator e makemakeʻoe iʻoi aku ma mua o kēia mau mea, eʻoluʻoluʻoe eʻike .