Xa siphucula imifanekiso sinokukhetha ukuyenza nge-Photoshop kwaye siyinyuse kwiphepha lewebhu okanye sinokukhetha ukhetho B: yenze ngeendlela ze-HTML, CSS kunye neJavascript ezikhoyo.
Emva kokutsiba zininzi iindlela zokuphucula imifanekiso, phantse zonke zenziwe nge-jQuery njengesiseko esiphambili okanye nge-CSS3 ukusebenzisa imilinganiselo yewebhu yamva nje, nangona ndikhumbuza ukuba kwimeko apho siphulukana nokuhambelana nezinye iibrawuza.
BakwiNgesi kodwa bayabanjwa kubhabho, bathenjisiwe :)
Imvelaphi | I-1WD
I-CSS3 Imifanekiso eqingqiweyo ene-jQuery
Funda ukusonga i-span tag ujikeleze into yomfanekiso ukufezekisa imifanekiso ejikelezayo eya kuboniswa kanye kuzo zonke izikhangeli zangoku.
2.
Imvelaphi emininzi kunye neMida ngeCSS 2.1
Funda ukuba ungazisebenzisa njani izinto ze-CSS 2.1 zobumbumbulu ukubonelela ukuya kuthi ga kwimizobo emi-3, imifanekiso emi-2 emiselweyo yesayizi emiselweyo, kunye nemida emininzi entsonkothileyo yento enye ye-HTML.
3.
Ingcebiso ekhawulezileyo: Imida emininzi eneCSS elula
Iscreencast esikhawulezayo esibonisa indlela yokufikelela kwimida emininzi ngeCSS elula ngaloo ndlela ukongeza ubunzulu ngakumbi kuyilo lwakho. Inguqulelo elula ngakumbi yesifundo sangaphambili.
4.
Imida emininzi kwizinto ezinokwandiswa ngamandla kunye neCSS2
Inguqulelo yesithathu ye UNicolas Gallagher ikubonisa ukuba wenzeni ukuba awubungakanani ubungakanani bento.
5.
Yonwaba w / Imida-Beveled, Ucinezelwe, kunye nokuninzi!
Funda ngendlela yokufezekisa isiphumo sokucinezelwa kweCSS kunye neendlela ezithile ezilula zomda wokufumana iziphumo ezahlukeneyo.
6.
IiPolaroids ngeCSS3
Funda ngendlela yokusebenzisa i-CSS2 ne-CSS3 eyoyikekayo ukuguqula uluhlu olungenakuthelekiswa nanto lwemifanekiso ibe yimifanekiso yePolaroid.
7.
Iphepha elipheleleyo elipheleleyo leMvelaphi
Funda ukuba ungawongeza njani umfanekiso ongasemva nge-CSS egcwalisa iphepha lonke ngomfanekiso, akukho sithuba simhlophe, umfanekiso wesikali njengoko kufuneka, awubangeli scrollbar kunye nokunye okuninzi.
8.
I-CSS3 Ibhokisi yeShadow kunye neZiphumo zokuHamba kweMifanekiso
Jonga indlela entsha yokongeza imiphumo yesithunzi ngokuhlela nje iphepha lesitayile.
9.
Umtsalane weThumbnail Isiphumo sokuHamba w / jQuery
Ukufezekisa ukucoceka kwesitayile esine-CSS kunye ne-jQuery.
10.
Uyenza njani into elula yeCSS Image Rollover
Kule tutorial uza kufunda ukuba uyile njani indlela elula yokwenza umfanekiso we-CSS ngesitayile esisiseko se-HTML kunye neCSS.
11.
Umgangatho wokudada
I-Floatutorial ikuthathela kwiziseko zezinto ezidadayo ezinjengemifanekiso, ukulahla iminqwazi, amaqhosha alandelayo nangasemva, iigalari zemifanekiso, uluhlu olusezantsi kunye nolungelelwaniso lweekholamu ezininzi. Jonga izifundiswa ezi-4 ezinikezelwe kumfanekiso odadayo.
12.
Iziphumo zeSnazzy Hover zisebenzisa iCSS
Kule khokelo, uya kuba uhamba udala iindlela eziguquguqukayo zokuhamba ngokuhamba usebenzisa iipropati zeCSS2.1
13.
Ukukhawuleza ngokukhawuleza ngaphandle
Layisha ngaphambili
Xa usebenzisa i-CSS umfanekiso wokuqengqeleka, imifanekiso emibini, emithathu, okanye engaphezulu kufuneka ilayishwe (kwaye ihlala ilayishwa kuqala kwiziphumo ezilungileyo). Funda indlela yokubeka onke amazwe kumfanekiso omnye wenza utshintsho olunamandla ngokukhawuleza kwaye awufuni kulayishwa kwangaphambili.
14.
IiKona eziJikeleziweyo zeJQuery
Iziphumo ezininzi ze-jQuery zeekona ezijikeleziweyo kunye neepateni ezininzi ngakumbi.
15.
Esona sixhobo silula sokufumana izixhobo kunye nokujonga kwangaphambili kwemifanekiso usebenzisa i-jQuery
Jonga imizekelo emi-3 yokusebenzisa iskripthi sokujonga kwangaphambili se-jQuery. Isicatshulwa esilula sinokusetyenziselwa iinjongo ezahlukeneyo.
16.
Iphakanyisiwe-Imvelaphi epheleleyo yeScreen /
Slidedi
Iplagi jQuery
I-Superzided iplagi ye-jQuery eyenza ubungakanani bayo bube yimifanekiso ukuze igcwalise isikhangeli ngelixa igcina umlinganiso wobungakanani bomfanekiso kunye nemijikelezo yemifanekiso / imvelaphi ngokudlula kwisilayidi ngotshintsho kunye nokulayisha kwangaphambili.
17.
PNG ngaphezulu
Ngaba ukhe wangena engxakini yokwenza isiza esinemifanekiso enikezwe ngumthengi, ukuze ufumane kamva emva kokuba behlaziye ukufota kwabo imbonakalo yoqobo kunye nokuziva kungagcinwanga? Esi sisombululo sibandakanya ukudala ukugqubana kwePNG ngokucacileyo okunokusetyenziswa njengesigqumathelo / isakhelo esijikeleze iJPEG okanye iGIF yesiqhelo. Ngale ndlela, ufakelo lwe-CMS oluqhelekileyo lunokuqwalaselwa ukuze abasebenzisi bakwazi ukulayisha iifoto ngaphandle kokukhathazeka malunga nokusebenzisa nayiphi na inkqubo yemizobo ukufaka izihluzi.
18.
BeZoom
Ubunzima
JQuery
Sondeza iplagi
I-BeZoom yindlela elula kwaye elula kwaye elula JQZoom. Ikhaphukhaphu kwaye kulula ukuyisebenzisa.
19.
Sebenzisa i-jQuery yoPopayi loMfanekiso oNgasemva
Dlala nge-jQuery kwaye utshintshe indawo ekuyo umfanekiso wangemva ukwenza uhlobo lwesiphumo osifunayo. Kukho inqaku elitsha eliphendula "Ndiyiphatha njani imimandla esebenzayo?" - Ukuphathwa kweLizwe eliSebenzayo leMvelaphi yoopopayi ye-jQuery.
20.
Iindlela ezi-5 zokuCoca iiMifanekiso zakho ngeCSS
Nazi iindlela ezimbalwa ezilula zokongeza incasa kwimifanekiso yakho eqhelekileyo. Sebenzisa i-Photoshop ukwenza isitayile kumfanekiso ngamnye kunokuba nzima kwaye kube nzima ukuwugcina ekuhambeni kwexesha. Ezi ndlela zilandelayo zeCSS ziya kukunceda ukunciphisa iintlungu.
21.
Kwenziwa kanjani:
Unokuphinda uphinde ubenamandla
Umfanekiso ongasemva
Funda ukuba ungawuseta njani umfanekiso ongasemva onokuphinda usebenze kunye neCSS. Unokukhetha ezintathu onokukhetha kuzo.
22.
Uhlobo lwekhonkco lakho lomfanekiso
Ukwazisa abasebenzisi ukuba icandelo elithile lewebhusayithi yethu lenzelwe ukuba ucofe kuyo lifezekiswa ngcono ngokusebenzisa imouse ngaphezulu kwesiphumo. La macandelo "anokucofa" ngokuqinisekileyo aquka umxholo wemifanekiso. Ikhonkco lomfanekiso siskripthi esikuvumela ukuba ufake isitayile esongezelelweyo kwikhonkco lakho lomfanekiso.
23.
Imifanekiso emininzi yangasemva kunye neCSS
Ngamanye amaxesha, kuyacaca ukusebenzisa imifanekiso engemva kokuyifaka ngqo kwiphepha. Kwaye ngelixa into nganye-efana nethegi yakho yomzimba- inokubamba umfanekiso omnye kuphela, zinokusetyenziswa kwizinto ezininzi.
24.
Imida yemifanekiso neCSS
Isifundo esilula ngokwenyani esibonisa indlela yokongeza umda oqinileyo kwimifanekiso usebenzisa i-CSS.
25.
I-CSS Sprites ngaphandle kokusebenzisa imifanekiso yangasemva
Funda indlela yokufaka isiphumo sokuhamba ngaphandle kolwazi oluninzi malunga ne-CSS sprites.
