Lapho sithuthukisa izithombe singakhetha ukukwenza nge-Photoshop bese siyifaka ekhasini lewebhu noma singakhetha nenketho B: kwenze ngamasu we-HTML, CSS neJavascript akhona.
Ngemuva kokugxuma kunezindlela eziningi zokwenza ngcono izithombe, cishe zonke zenziwe nge-jQuery njengesisekelo esiyinhloko noma nge-CSS3 ngisebenzisa izindinganiso zakamuva zewebhu, yize ngikukhumbuza ukuthi kuleso simo silahlekelwa ukuhambisana nezinye iziphequluli.
BangesiNgisi kepha babanjwa ngendiza, bathenjiswa :)
Umthombo | I-1stWD
Isithombe Esizungeziwe se-CSS3 Nge-jQuery
Funda ukusonga umaki wesikhala uzungeze into yesithombe ukufeza izithombe eziyindilinga ezizokhonjiswa kuzo zonke iziphequluli zesimanje.
2.
Ingemuva Nemingcele eminingi ene-CSS 2.1
Funda ukuthi ungazisebenzisa kanjani izinto ze-CSS 2.1 mbumbulu ukuhlinzekela ngemishini engu-3 yangemuva, izithombe ezi-2 zosayizi ongaguquki, nemingcele eminingi eyinkimbinkimbi yento eyodwa ye-HTML.
3.
Ithiphu Esheshayo: Imingcele eminingi ene-CSS elula
I-screencast esheshayo ekhombisa ukuthi ungayifinyelela kanjani imingcele eminingi nge-CSS elula ngaleyo ndlela ungeza ukujula okwengeziwe kumiklamo yakho. Uhlobo olulula kakhulu lwesifundo sangaphambilini.
4.
Imingcele eminingi ezintweni ezinamandla amakhulu nge-CSS2
Uhlobo lwesithathu lwe UNicolas Gallagher ngikukhombisa okufanele ukwenze uma ungasayizi usayizi wento.
5.
Zijabulise ama-B / Borders - Beveled, Pressed, & More!
Funda ukuthi ungawufinyelela kanjani umphumela ocindezelwe nge-CSS namanye amaqhinga wesitayela somngcele olula ukuthola imiphumela ehlukahlukene.
6.
Ama-Polaroids ane-CSS3
Funda ukuthi ungalusebenzisa kanjani i-CSS2 ne-CSS3 esabekayo ukuvula uhlu lwezithombe ngenye indlela lube isethi egcwele yezithombe zePolaroid.
7.
Isithombe esingemuva sekhasi eligcwele eliphelele
Funda ukuthi ungangeza kanjani isithombe sangemuva nge-CSS esigcwalisa lonke ikhasi ngomfanekiso, asikho isikhala esimhlophe, isikali sesithombe njengoba kudingeka, asibangeli amabha wokuhambisa nokunye okuningi.
8.
I-CSS3 Box Shadow kanye ne-Image Hover Effects
Hlola indlela entsha yokwengeza imiphumela yesithunzi ngokuhlela ishidi lesitayela.
9.
Isithonjana Esihle Sokuzulazula w / jQuery
Finyelela umthelela ococekile wesitayela se-flash nge-CSS ne-jQuery.
10.
Ungayakha Kanjani Umphumela Olula we-CSS Image Rollover
Kulesi sifundo uzofunda ukuthi ungawakha kanjani umphumela wokudlulisa isithombe we-CSS olula ngesitayela se-HTML nesisekelo se-CSS.
11.
I-Floatutorial
I-Floatutorial ikuthatha ngokusebenzisa izisekelo zezinto ezintantayo njengezithombe, izigqoko zokulahla, izinkinobho ezilandelayo nezangemuva, imidwebo yezithombe, izinhlu ezisemgqeni nezakhiwo zamakholomu amaningi. Bheka okokufundisa okungu-4 okunikezelwe entanta yesithombe.
12.
Imiphumela Ye-Snazzy Hover Usebenzisa i-CSS
Kulesi sifundo, uzobe udala izindlela eziguquguqukayo zokuhambisa phezulu usebenzisa izakhiwo ze-CSS2.1.
13.
Ukudluliselwa Okusheshayo Ngaphandle
Layisha kuqala
Lapho usebenzisa i-CSS image rollovers, izithombe ezimbili, ezintathu, noma ngaphezulu kufanele zilayishwe (futhi zivame ukulayishwa kuqala ukuthola imiphumela emihle). Funda ukuthi ungazibeka kanjani zonke izifundazwe emfanekisweni owodwa zenza ushintsho olunamandla ngokushesha futhi azidingi ukulayishwa kuqala.
14.
jQuery Amakhona Ayindilinga
Imiphumela eminingi ye-jQuery yamakhona ayindilinga namaphethini amaningi.
15.
I-Tooltip elula nokuhlola kuqala isithombe usebenzisa i-jQuery
Bona izibonelo ezi-3 zokusebenzisa iskripthi sokubuka kuqala se-jQuery rollover. Lo mbhalo olula ungasetshenziselwa izinhloso ezahlukahlukene.
16.
Okuphakanyisiwe - Isendlalelo Sesikrini Esigcwele /
Umbukiso wesilayidi
i-plugin ye-jquery
I-Superzided i-plugin ye-jQuery ekhulisa usayizi wezithombe ukuze igcwalise isiphequluli ngenkathi igcina isilinganiso sobukhulu besithombe nemijikelezo yezithombe / izizinda ngesilayidi esinezinguquko nokulayishwa kuqala.
17.
Imbondela ye-PNG
Wake wahlangabezana nenkinga yokwakha isayithi enezithombe ezinikezwe iklayenti, kodwa uthole kamuva ngemuva kokubuyekeza izithombe zabo ukubukeka nokuzizwa kwangempela akugcinwa? Lesi sixazululo sibandakanya ukudala imbondela ebonakalayo ye-PNG engasetshenziswa njenge-mask / ifreyimu ezungeze i-JPEG ejwayelekile noma i-GIF. Ngale ndlela, ukufakwa okujwayelekile kwe-CMS kungalungiswa ukuze abasebenzisi bakwazi ukulayisha izithombe ngaphandle kokukhathazeka ngokusebenzisa noma yiluphi uhlelo lwehluzo ukufaka izihlungi.
18.
I-BeZoom
Okukhulu
jQuery
Sondeza i-Plugin
I-BeZoom iyindlela elula futhi engasindi ye- JQZoom. Ilula futhi kulula ukuyisebenzisa.
19.
Kusetshenziswa i-jQuery yezithombe zesithombe sangemuva
Dlala nge-jQuery bese ushintsha indawo yesithombe sangemuva ukudala uhlobo lomphumela owufunayo. Kukhona i-athikili entsha ephendula "Ngisisingatha kanjani isimo esisebenzayo?" - Ukuphatha Isimo Esisebenzayo se-jQuery Animated Backgrounds.
20.
Izindlela ezi-5 zokunonga izithombe zakho nge-CSS
Nazi izindlela ezimbalwa ezilula zokwengeza ukunambitheka ezithombeni zakho ezijwayelekile ze-bland. Ukusebenzisa i-Photoshop ukwenza isitayela isithombe ngasinye kungaba yisicefe futhi kube nzima ukusigcina ngokuhamba kwesikhathi. Lezi zindlela ezilandelayo ze-CSS zizokusiza ukudambisa lobo buhlungu.
21.
Kanjani:
Inikwe amandla futhi
Isithombe sangemuva
Funda ukuthi ungasisetha kanjani isithombe sangemuva esilinganiselwe nge-CSS. Unezinketho ezi-3 ongakhetha kuzo.
22.
Isitayela Sezixhumanisi Zakho Sezithombe
Ukwazisa abasebenzisi ukuthi isigaba esithile sewebhusayithi yethu senzelwe ukuthi sichofozwe kutholakala kangcono ngokusebenzisa igundane ngaphezulu komphumela. Lezo zingxenye "ezichofozekayo" ngokuqinisekile zifaka izithombe zokuqukethwe. I-Image Link yisikripthi esenza ukwazi ukusebenzisa isitayela esengeziwe kuzixhumanisi zakho zesithombe.
23.
Izithombe Zangemuva Eziningi ezine-CSS
Ngezinye izikhathi, kunengqondo ukusebenzisa izithombe ezingemuva kunokuzifaka ngqo ekhasini. Futhi ngenkathi into ngayinye - njengomaki womzimba wakho - ingabamba isithombe sangemuva esisodwa kuphela, singasetshenziswa ezintweni eziningana.
24.
Imingcele Yezithombe nge-CSS
Isifundo esilula impela esikukhombisa ukuthi uwengeza kanjani umngcele oqinile ezithombeni usebenzisa i-CSS.
25.
I-CSS Sprites ngaphandle kokusebenzisa izithombe ezingemuva
Funda ukuthi ungawusebenzisa kanjani umphumela wokuhambisa phezulu ngaphandle kolwazi oluningi ngama-CSS sprites.
