01 a 04
Kukhazikitsa Msewu Wodutsa Msewu Wodutsa ndi CSS3
Zolemba Zina
Mtundu wochuluka kwambiri wa gradient womwe udzawone ndi mzere wozungulira wa mitundu iwiri. Izi zikutanthauza kuti mzerewu udzasunthira molunjika kusintha pang'ono pang'onopang'ono kuchokera pa mtundu woyamba mpaka wachiwiri pamzerewu. Chithunzichi patsamba lino chikuwonetsa chophweka chakumanzere mpaka kumanja cha # 999 (mdima wakuda) mpaka #fff (woyera).
Madilosi amodzi ndi osavuta kufotokozera, ndipo ali ndi chithandizo chothandizira pazithunzithunzi. Makhalidwe a CSS3 akuthandizidwa pa Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, ndi Safari 4+. Internet Explorer akhoza kuwonjezera ma gradients pogwiritsa ntchito fyuluta ndikuwathandizira kubwerera ku IE 5.5. Izi siziri CSS3, koma ndizomwe mungakwaniritse zofufuzira pamsakatuli.
Mukafotokozera chikhalidwe muyenera kufotokoza zinthu zosiyanasiyana:
- Ndi mtundu wanji wa mtunduwu womwe umakhala wozungulira kapena wonyezimira
- Kumene malo ayenera kuyamba
- Kumene malo akuyenera kuyima
- Kodi ndi mitundu yanji yomwe ili yoyenera ndi kumene iyenera kuyamba ndi kuyima
Kuti mufotokoze ma gradients ofanana pogwiritsa ntchito CSS3, mumalemba kuti:
mzere wozungulira ( mbali kapena mbali kapena ngodya , kuyima kwa mtundu, kuyima kwa mtundu )
- Choyamba mumatanthauzira mtundu wa gradient ndi dzina lokhazikika .
- Kenaka, mumatanthawuza kuyamba ndi kuimitsa mfundo zazithunzi mwa njira imodzi: mbali ya mzere mu madigiri kuyambira 0 mpaka 359, ndi madigiri 0 akulozera molunjika. Kapena ndi ntchito "yam'mbali kapena ya ngodya," monga kumanzere, kumanja, pansi, ndi pamwamba. Izi zidzafotokozedwa mwatsatanetsatane patsamba lotsatira. Ngati muzisiya izi, ma gradient adzayenda kuchokera pamwamba mpaka pansi pa element.
- Kenaka mumatanthauzira kuyima kwa mitundu. Mukufotokozera mtundu ukuima ndi mtundu wa code ndi gawo mwachindunji. Chiwerengero chimauza osatsegula kumene pamzere kuti ayambe kapena kutha ndi mtundu umenewo. Chosalephera ndichoyika mitundu yofanana mofanana ndi mzere. Mudzaphunzira zambiri za mapazi a mitundu pa tsamba 3.
Choncho, kutanthauzira chithunzi cha pamwambachi ndi CSS3, mumalemba kuti:
mzere wamagazi (kumanzere, # 999999 0%, #ffffff 100%);
Ndipo kuti ukhale ngati maziko a DIV yomwe umalemba:
div {
Chithunzi chakumbuyo: mzere wozungulira (kumanzere, # 999999 0%, #ffffff 100%;
}}
Zowonjezereza Zoumba kwa CSS3 Gradients Linear
Kuti mutenge wanu wanu ntchito yogwiritsira ntchito-msakatuli, muyenera kugwiritsa ntchito zowonjezera zowonjezera ma browser ambiri ndi fyuluta ya Internet Explorer 9 ndi kuchepetsa (kwenikweni 2 filters). Zonsezi zimatenga zinthu zomwezo kuti zifotokoze zolemba zanu (kupatula kuti mungathe kutanthauzira zojambula ziwiri zokha mu IE).
Microsoft Filters ndi Extension -Internet Explorer ndizovuta kwambiri kuthandizira, chifukwa mukusowa mizere itatu kuti muthandizire mausinkhu osiyanasiyana. Kuti mutenge mbuzi yam'mwambayi kuti mukhale yoyera mungathe kulemba:
/ * IE 5.5-7 * /
Fyuluta: pulogalamu: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-mapepala: "pulogalamu: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-masi-gradient (kumanzere, # 999999 0%, #ffffff 100%);
Mozilla Extension -The -moz- extension ikugwira ntchito ngati katundu wa CSS3, pokhapokha ndi_mowonjezera. Kuti mutenge gradient pamwamba pa Firefox, lembani:
-maz-linear-gradient (kumanzere, # 999999 0%, #ffffff 100%);
Opera Extension -The -oonjezera imaphatikizapo ma gradients ku Opera 11.1+. Kuti mupeze malemba awa, lembani:
-n-linear-gradient (kumanzere, # 999999 0%, #ffffff 100%);
Webkit Extension -The -webkit- extension ikugwira ntchito mofanana ndi katundu wa CSS3. Kuti mufotokoze Safari 5.1+ kapena Chrome 10+ yomwe mumalemba:
-bomba-line-gradient (kumanzere, # 999999 0%, #ffffff 100%);
Palinso kachikulire kwa Webkit extension yomwe imagwira ntchito ndi Chrome 2+ ndi Safari 4+. Mmenemo mumatanthauzira mtundu wa gradient monga mtengo, m'malo mwa dzina la katundu. Kuti mutenge mdima wofiira ndi chingwechi, lembani:
-webkit-gradient (kumtunda, kumanzere kumanzere, pamwamba pomwe, kuyimira mtundu (0%, # 999999), kuima kwa mtundu (100%, #ffffff));
Mzere Wathunthu wa CSS3 Wowonjezera Gradient CSS
Kuti muthandizidwe pamasitomala onse kuti mutenge mdima wofiira pamwamba panu muyenera kuyamba kuphatikiza mtundu wolimba wa obwereza omwe sagwirizane ndi ma gradients, ndipo chinthu chotsiriza chiyenera kukhala kachitidwe ka CSS3 kwa osatsegula omwe akugwirizana. Kotero, inu mukulemba:
maziko: # 999999;
maziko: -moz-linear-gradient (kumanzere, # 999999 0%, #ffffff 100%);
maziko: -webkit-gradient (mzere, kumanzere kumanzere, pamwamba pomwe, kuyimira mtundu (0%, # 999999), kuima kwa mtundu (100%, #ffffff));
maziko: -webkit-linear-gradient (kumanzere, # 999999 0%, #ffffff 100%);
maziko: -o-linear-gradient (kumanzere, # 999999 0%, #ffffff 100%);
maziko: -ms-linear-gradient (kumanzere, # 999999 0%, #ffffff 100%);
Fyuluta: pulogalamu: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
fyuluta: pulogalamu: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
maziko: ofanana-gradient (kumanzere, # 999999 0%, #ffffff 100%);
Masamba otsatirawa mu phunziroli afotokoza magawo a tsatanetsatane wa tsatanetsatane, ndipo tsamba lomaliza likukuwonetsani ku chida chomwe ndi njira yabwino kwambiri yopangira ma gradients CSS3.
Onani tsatanetsatane wamagetsi pogwiritsa ntchito CSS chabe.
02 a 04
Kupanga Zojambula Zogwirizana-Mng'oma wa Zapamwamba
Zoyamba ndi zoyimitsa zizindikiro zimayang'ana mbali ya gradient. Ma gradients ambiri amatha kuchokera pamwamba mpaka pansi kapena kumanzere kupita kumanja. Koma n'zotheka kumanga gradient yomwe imayenda pamzere wolozera. Chithunzi chomwe chili patsamba lino chikuwonetsa chophweka chosavuta chomwe chimasuntha pamtunda wotalika mamita 45 kudutsa chithunzi kuchokera kumanja kupita kumanzere.
Mitsempha Yotanthauzira Mzere Wofunika
Mphepete ndi mzere pa bwalo lolingalira pakatikati pa chinthucho. 0deg ndemanga, mapu 90deg kumanja, malo otalika 180, ndi ndemanga 270deg kumanzere. Mukhoza kufotokoza mbali iliyonse kuchokera madigiri 0 mpaka 359.
Muyenera kuzindikira kuti pamtunda, mbali ya 45 digiti ikuchoka kuchokera kumtunda kumanzere kumanzere kupita kumanja, koma mu rectangle mapepala oyambira ndi mapeto ali pang'ono kunja kwa mawonekedwe, monga momwe mukuonera mu chithunzichi.
Njira yowonjezereka yofotokozera gawo lofanana ndikutanthawuzira ngodya, monga pamwamba pomwe ndipo gradient idzasunthira kuchoka ku ngodya kupita kumbali ina. Mungathe kufotokoza zoyambira ndi mawu awa:
- pamwamba
- kulondola
- pansi
- kumanzere
- pakati
Ndipo zingathe kuphatikizidwa kukhala zenizeni, monga:
- pamwamba pomwe
- pamwamba kumanzere
- malo apamwamba
- pansi kumanja
- pansi kumanzere
- pakatikati
- malo abwino
- malo oyambira
Pano pali CSS ya gradient yofanana ndi yomwe ikuyimira, yofiira mpaka yoyera ikuyenda kuchokera pamwamba kumanja mpaka kumanzere kumanzere:
maziko: ## 901A1C;
Chithunzi chakumbuyo: -moz-linear-gradient (pamwamba pomwe, # 901A1C 0%, # FFFFFF 100%);
Chithunzi chakumbuyo: -webkit-gradient (mzere, pamwamba, kumanzere, kumbuyo (0, # 901A1C), kuima kwa mtundu (1, #FFFFFF));
maziko: -webkit-linear-gradient (pamwamba pomwe, # 901A1C 0%, #ffffff 100%);
maziko: -o-linear-gradient (pamwamba pomwe, # 901A1C 0%, #ffffff 100%);
maziko: -ms-linear-gradient (pamwamba pomwe, # 901A1C 0%, #ffffff 100%);
kumbuyo: mzere wozungulira (pamwamba pomwe, # 901A1C 0%, #ffffff 100%);
Mwinamwake mwazindikira kuti palibe mafayilo a IE mu chitsanzo ichi. Izi zili choncho chifukwa IE imalola mitundu iwiri ya fyuluta: pamwamba mpaka pansi (yosasintha) ndi kumanzere (ndi GradientType = 1 kusintha).
Onani tsatanetsatane wamagetsi akugwiritsidwa ntchito pogwiritsa ntchito CSS chabe.
03 a 04
Mitundu imasiya
Ndi CSS3 gradients ofiira, mukhoza kuwonjezera mitundu yambiri kwa yanu kuti akonze ngakhale fancer zotsatira. Kuti muwonjezere mitundu iyi, muwonjezere mitundu yambiri mpaka kumapeto kwa katundu wanu, osiyana ndi makasitomala. Muyenera kumaphatikizapo kuti pa mzere mitundu iyenera kuyamba kapena kutha.
Mitundu ya Internet Explorer imathandizira kokha maimidwe awiri, kotero pamene mukumanga chojambulachi, muyenera kuti muziphatikizapo mitundu yoyamba ndi yachiwiri yomwe mukufuna kuwonetsa.
Pano pali CSS ya pamwambapa ya mitundu itatu:
maziko: #ffffff;
maziko: -moz-linear-gradient (kumanzere, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
Chiyambi: -webkit-gradient (mzere, kumanzere, kumanja, kuima (0%, # ffffff), kuima kwa mtundu (51%, # 901A1C), kuima kwa mtundu (100%, # ffffff));
maziko: -webkit-linear-gradient (kumanzere, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
maziko: -o-linear-gradient (kumanzere, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
maziko: -ms-linear-gradient (kumanzere, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
Fyuluta: ndondomeko: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
kumbuyo: mzere wofiira (kumanzere, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
Onani tsatanetsatane wamakinawa omwe ali ndi mapulogalamu atatu omwe akugwiritsidwa ntchito pogwiritsa ntchito CSS chabe.
04 a 04
Pangani Zolemba Zomangamanga Zosavuta
Pali malo awiri omwe ndimapanga kuti ndikuthandizeni kumanga madidienti, aliyense amakhala ndi zopindulitsa ndi zosokoneza kwa iwo, sindinapeze womanga nyumba yemwe amachita zonse.
Wopambana CSS Generator Great
Jenereta imeneyi ndi yotchuka kwambiri chifukwa imachita chimodzimodzi kwa omanga nyumba mu mapulogalamu monga Photoshop. Ndimakondanso chifukwa imakupatsani maulendo onse a CSS, osati Webkit ndi Mozilla. Vutoli ndi jeneretayi ndikuti limangogwirizanitsa zowonongeka ndi zowoneka bwino. Ngati mukufuna kupanga ma didial gradients, muyenera kupita ku jenereta ina ndikupangira.
CSS3 Grient Generator
Jenereta iyi inanditengera kanthawi pang'ono kuti ndizimvetsetse kuposa yoyamba, koma imathandizira kusintha chitsogozo kuti chikhale chosiyana.
Ngati mukudziwa za wina wamkulu wa CSS Generator amene mumakonda kuposa awa, chonde tiuzeni .