01 o 04
Te hanga i nga Kaihautoro Raro-Kairau-Kairangi me CSS3
Ngā Kairangi Korero
Ko te ahua o te rōnaki ka tino kitea e koe ko te kiriata ahorangi o nga tae e rua. Ko te tikanga tenei ka neke te kiritaki i roto i tetahi raupapa tika rerekē i te tae tuatahi ki te tuarua i taua raina. Ko te ahua o tenei waahanga kei te whakaatu i tetahi kiriata maui-matau-matau o # 999 (hina hina) ki #fff (ma).
Ko nga kakano raupapa te mea tinowari ki te tautuhi, me te tino tautoko i roto i nga kaiwhakamahi. Kei te tautokona nga kiritaki raupapa CSS3 i te Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, me Safari 4+. Ka taea e Internet Explorer te whakanui i nga kiritaki mā te whakamahi i te taitapa me te tautoko ia ratou ki te IE 5.5. Ehara tenei i te CSS3, engari he mea whiriwhiri mo te whakawhitinga cross-browser.
A, no te tautuhi koe i te kiritaki ka hiahia koe ki te tautuhi i nga mea rereke:
- He aha te ahua o te kiritaki he raupapa-ahoariki ranei
- Me tīmata te kiritaki
- Ki te mutu te kiritaki
- He aha nga tae kei te rōnaki me te wahi me timata me te mutu
Hei tautuhi i nga kiritaki raupapa me te whakamahi i te CSS3, tuhia e koe:
aho-riki ( koki , taha ranei te kokonga , te tae tae , te tae tae )
- Tuatahi ka tautuhi koe i te momo o te kiriata me te ingoa aho- ingoa.
- Na, ka tautuhi koe i nga tohu timatanga me te mutu o te kiriata i tetahi o nga huarahi e rua: ko te koki o te raina i nga nekehanga mai i te 0 ki te 359, me te 0 nga tohu e tohu tika ana. Ki te mahi "taha, kokonga" ranei, penei i te taha maui, te tika, te raro, me te runga. Ka whakamaramatia enei ki nga korero e whai ake nei. Ki te waiho koe i enei, ka rere te rōnaki mai i runga ki raro o te huanga.
- Na ka tautuhi koe i te mutu o te tae. Kei te tautuhi koe i te mutu o te tae ki te waehere tae, me te ōrau whiringa. Ko te pene e whakaatu ana ki te tirotiro i te waahi ka timata, ka mutu ranei ki te tae. Ko te taunoa ko te tuku i nga tae tae noa ki te raina. Ka ako koe mo nga paanga tae i te wharangi 3.
Na, ki te tautuhi i te kiriata i runga ake nei me CSS3, tuhia e koe:
aho-rōngai (maui, # 999999 0%, #ffffff 100%);
A, hei tohu i te ahua o te DIV ka tuhia e koe:
te whakawhiti [
whakaahua-pikitia: riki-rōrahi (ki maui, # 999999 0%, #ffffff 100%;
}
Ngā Whakawhitinga Pūtirotiro mo CSS3 Kairangi Korero
Hei whiwhi i to rōnaki ki te mahi cross-browser, me whakamahi koe i nga whakawhitinga pūtirotiro mo te nuinga o nga kaitirotiro me te taitapa mo Internet Explorer 9 me te iti iho (he 2 whiriwhiringa). Ko enei katoa e mau ana i nga ahuatanga kotahi hei tautuhi i to kiore (kaore pea ka taea e koe te tautuhi i nga kakano 2-tae noa i te IE).
Ko te Whanaketanga Motuhake a Microsoft -Iurangi Explorer ko te mea tino uaua ki te tautoko, no te mea e hiahia ana koe i nga rarangi rererangi e toru hei tautoko i nga putanga rereke rereke. Hei tiki i te upoko hina ki te kiore maeneene ka tuhi koe:
/ * IE 5.5-7 * /
tātari: 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 * /
-miti--aho-riki (maui, # 999999 0%, #ffffff 100%);
Mozilla Extension -The -moz-whakawhānui rite mahi CSS3, tika ki te -moz-whakawhānui. Ki te tiki i te kiriata i runga mo Firefox, tuhia:
-moz-linear-gradient (maui, # 999999 0%, #ffffff 100%);
Ko te Whakarahi Opera -Ko te -to-whakawhānui he whakatairanga ki Opera 11.1. Hei tiki i te kiriata o runga, tuhia:
-o-linear-gradient (ki maui, # 999999 0%, #ffffff 100%);
Ko te Whakawhitinga Paetukutuku -Ko te -tohinga-whakawhitinga-mahi e rite ana ki te taonga CSS3. Hei tautuhi i te kiriata i runga mo Safari 5.1+ ranei Chrome 10+ ka tuhituhi koe:
-whanawhana-rererangi-maui (maui, # 999999 0%, #ffffff 100%);
Kei reira hoki tetahi putanga tawhito o te toronga Whaiaro e mahi ana me te Chrome 2+ me te Safari 4+. I roto i tenei ka tautuhi koe i te momo o te rōnaki hei utu, kaua i te ingoa o te ingoa. Hei tiki i te kiore hina ki te kiore maama me tenei toronga, tuhia:
-awerangi-rererangi (ahorangi, te taha maui, te taha matau, te tae-tae (0%, # 999999), te tae-tae (100%, # ffffff));
Katoa CSS3 Raina Raraunga CSS
Mo te tautoko tonu-cross-browser kia whiwhi ai koe i te tae hina ki te kenere ma i runga ake, me whakauru i te tae maamaa mo te hunga tirotiro e kore e tautoko i nga paanga, me te waahanga whakamutunga hei tauira mo te hunga CSS3 mo nga kaitoro e tino tika ana. Na, tuhia e koe:
whakamārama: # 999999;
te papamuri: -moz-linear-gradient (maui, # 999999 0%, #ffffff 100%);
te papamuri: -kitkitite-teitei (te ahorangi, te taha maui, te taha matau, te tae-tae (0%, # 999999), te tae-tae (100%, # ffffff));
papamuri: -whanawhana-aho-riki (maui, # 999999 0%, #ffffff 100%);
te papamuri: -o-linear-gradient (maui, # 999999 0%, #ffffff 100%);
te papamuri: -mahana--aho-riki (maui, # 999999 0%, #ffffff 100%);
tātari: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
whakamāramatanga: te rōrahi-ahora (ki maui, # 999999 0%, #ffffff 100%);
Ko nga whārangi e whai ake nei i roto i tenei akoranga e whakamarama ana i nga waahanga o te rōnaki i te taipitopito atu, me te whārangi whakamutunga e tohu ana koe ki tetahi taputapu e pai ana ki te waihanga aunoa i nga kiriata CSS3.
Tirohia tenei rōnaki raupapa i roto i te mahi mā te whakamahi i te CSS anake.
02 o 04
Te waihanga i nga Kaihautuku Tae-Ko te Angle of the Gradient
Ko nga timatanga me nga tautuhi e whakatau ana i te koki o te rōnaki. Ko te nuinga o nga raupapa ahorangi mai i runga ki raro, ki maui ranei ki te taha matau. Engari ka taea te hanga i tetahi rōnaki e neke ana i runga i te raina whara. Ko te ahua o tenei waahanga e whakaatu ana i te kiriata māmā e neke ana i te whanui 45degree puta noa i te whakapakoko mai i te matau ki te maui.
Ngā Tohu hei Tautuhi i te Raina Korero
Ko te koki he raina i runga i te porohita whakaaro i roto i te pokapū o te huanga. 0deg te tohu, 90deg ki te tika, 180deg ki raro, me 270deg ki te maui. Ka taea e koe te tautuhi i tetahi koki mai i 0 ki te 359 nekehanga.
Me mahara koe i roto i te tapawha, ka neke atu te koki 45 neke atu i te kokonga maui ki te taha raro, engari i roto i te tapawhiti te timatanga me nga pito mutunga ka paku noa atu i te ahua, ka kite koe i te ahua.
Ko te huarahi noa ake ki te tautuhi i te rōnaki diagonal ko te tautuhi i te kokonga, pērā i te taha ki runga, ka neke atu te kiritaki mai i te kokonga ki te kokonga. Ka taea e koe te tautuhi i te waitohu tīmata me nga kupumatua e whai ake nei:
- runga
- tika
- raro
- maui
- pokapū
Ka taea hoki te whakauru ki a ratau kia nui atu nga korero, penei:
- runga tika
- ki runga maui
- pokapū runga
- raro matau
- raro maui
- pokapū raro
- pokapū tika
- pokapū maui
Koinei te CSS mo te rōnaki rite tonu ki tetahi e whakaahuatia ana, he whero ki te maama mai i te kokonga matau ki te taha maui:
whakamārama: ## 901A1C;
whakaahua-: -moz-linear-gradient (runga matau, # 901A1C 0%, # FFFFFF 100%);
image--whanawhana (te ahorangi, te taha matau, te taha maui, te tae-tae (0, # 901A1C), te tae-tae (1, #FFFFFF));
Papamuri: -whanawhana-ahorangi-riki (topenga matau, # 901A1C 0%, #ffffff 100%);
te papamuri: -o-linear-gradient (runga matau, # 901A1C 0%, #ffffff 100%);
te papamuri: -mite--aho-riki (topenga tika, # 901A1C 0%, #ffffff 100%);
whakamāramatanga: te rōrahi-ahora (topenga tika, # 901A1C 0%, #ffffff 100%);
Kua kitea pea e koe kaore he reta IE i tenei tauira. Ko te mea na te mea ka taea e IE anake nga momo whiriwhiringa: i runga ki raro (te taunoa) me te maui ki te taha matau (me te Whakawhiti GradientType = 1).
Tirohia tenei rōnene raupapa pouaka whakawhiti i roto i te mahi mā te whakamahi i te CSS anake.
Tuhinga o mua
Tae Tae
Ma te CSS3 nga matakite raupapa, ka taea e koe te whakauru i nga tae maha ki to kiore ki te waihanga i nga painga paanga. Hei tapiri i enei tae, ka tapiritia e koe etahi tae ke atu ki te pito o to taonga, ka wehea e nga tohu. Me whakauru koe ki hea i runga i te rarangi me timata me te mutunga nga tae.
Ko nga whiriwhiringa o Internet Explorer e tautoko noa ana i nga tae e rua, na ka hangaia tenei rōnaki, me whakauru anake i te tae tuatahi me te tuarua e hiahia ana koe ki te whakaatu.
Tenei ko te CSS mo te rōnaki 3-tae teitei:
Tuhinga: #ffffff;
muri: -moz-linear-gradient (maui, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
te papanga-teitei-teitei, te tae-tae (0%, te # ffffff), te tae-tae (51%, # 901A1C), te tae-tae (100%, # ffffff));
te papamuri: -arangi-rererangi-rōrahi (taha maui, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
te papamuri: -o-linear-gradient (maui, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
te papamuri: -mite--aho-riki (maui, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
tātari: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
te papamuri: te rōrahi-ahora (maui, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Tirohia tenei rōnaki aho me te toru o nga tae ka mutu i roto i te whakamahi i te CSS anake.
04 o 04
Whakaritea te Whakanuia o nga Kaihautanga
E rua nga pae e tūtohutia ana e ahau hei awhina ia koe ki te hanga i nga kongakonga, he pai nga painga me nga takoha ki a ratou, kaore i kitea e ahau he kaihanga kiriata e mahi ana i nga mea katoa.
Ultimate CSS Gradient Generator
He tino rongonui tenei kaiwhakahaere kiritaki no te mea he rite tonu te mahi ki nga kaihanga riki i roto i nga papatono rite Photoshop. E pai ana hoki ahau na te mea e hoatu ana e koe ki a koe nga whakawhitinga CSS katoa, ehara i te mea ko te Toangataiti me Mozilla anake. Ko te raruraru ki tenei kaihanga ko te tautoko anake i nga matakite whakapae me te poutū. Mena e hiahia ana koe ki te mahi i nga kiore kaitautoko, me haere koe ki tetahi atu kaiwhakahaere e tūtohu ana au.
CSS3 Generator Kairangi
He iti ake te mahinga o tenei kaihanga ki te marama atu i te tuatahi, engari e tautoko ana i te huri i te ahunga ki te taatai.
Mena e mohio ana koe ki tetahi atu CSS Gradient Generator e pai ake ana koe i enei, tena koa kia mohio .