Kapag nagpapabuti ng mga imahe maaari nating piliing gawin ito sa Photoshop at pagkatapos ay mai-mount ito sa web page o maaari din nating piliin ang pagpipiliang B: gawin ito sa mga diskarteng HTML, CSS at Javascript na magagamit.
Matapos ang pagtalon maraming mga diskarte upang mapabuti ang mga imahe, halos lahat ng mga ito ay ginawa sa jQuery bilang pangunahing base o sa CSS3 sinasamantala ang pinakabagong mga pamantayan sa web, bagaman pinapaalala ko sa iyo na sa kasong iyon ay nawawalan kami ng pagiging tugma sa ilang mga browser.
Nasa English sila ngunit nahuli sila sa mabilis, nangako :)
Pinagmulan | 1stWD
CSS3 Bilugan na Larawan Gamit ang jQuery
Alamin na balutin ang isang span tag sa paligid ng elemento ng imahe upang makamit ang mga bilugan na imahe na ipapakita mismo sa lahat ng mga modernong browser.
2.
Maramihang Mga Background at Hangganan na may CSS 2.1
Alamin kung paano gamitin ang CSS 2.1 mga pseudo-element upang magbigay ng hanggang sa 3 mga background na background, 2 naayos na laki ng mga imaheng pang-presentasyon, at maraming mga kumplikadong hangganan para sa isang solong elemento ng HTML.
3.
Mabilis na Tip: Maramihang Mga Hangganan na may Simpleng CSS
Ipinapakita sa iyo ng mabilis na screencast kung paano makamit ang maraming mga hangganan na may simpleng CSS sa paraang pagdaragdag ng higit na lalim sa iyong mga disenyo. Mas pinasimpleng bersyon ng nakaraang tutorial.
4.
Maramihang Mga Hangganan sa Dynamically Sized Elemen na may CSS2
Pangatlong bersyon ng Nicholas Gallagher ipinapakita sa iyo kung ano ang gagawin kung hindi mo ang laki ng elemento.
5.
Magkaroon ng Kasayahan sa w / Mga Hangganan - Beveled, Pressed, at Higit Pa!
Alamin kung paano makamit ang pinindot na epekto sa CSS at ilang simpleng mga trick sa istilo ng hangganan upang makakuha ng iba't ibang mga epekto.
6.
Polaroids na may CSS3
Alamin kung paano gumamit ng ilang mga kahanga-hangang CSS2 at CSS3 upang gawing isang buong pagsabog ng hanay ng mga larawang Polaroid ang isang hindi maipangingay na listahan ng mga imahe.
7.
Perpektong Larawan ng Background ng Buong Pahina
Alamin kung paano magdagdag ng imahe sa background gamit ang CSS na pumupuno sa buong pahina ng imahe, walang puting puwang, kaliskis ng imahe kung kinakailangan, ay hindi sanhi ng mga scrollbar at marami pang iba.
8.
Mga Epekto ng Shadow at Image Hover ng CSS3 Box
Galugarin ang isang bagong paraan ng pagdaragdag ng mga drop shadow effects sa pamamagitan lamang ng pag-edit ng isang sheet ng estilo.
9.
Fancy Thumbnail Hover Effect w / jQuery
Makamit ang maayos na epekto ng istilong flash na may CSS at jQuery.
10.
Paano Lumikha ng Simple CSS Image Rollover Effect
Sa tutorial na ito matututunan mo kung paano lumikha ng simpleng CSS rollover effect na may pangunahing estilo ng HTML at CSS.
11.
pagtuturo
Dadalhin ka ng Floatutorial sa mga pangunahing kaalaman ng mga lumulutang na elemento tulad ng mga imahe, drop cap, mga pindutan ng susunod at likod, mga gallery ng imahe, mga listahan ng inline at layout ng multi-haligi. Suriin ang 4 na mga tutorial na nakatuon sa paglulutang ng imahe.
12.
Mga Snazzy Hover na Epekto Gamit ang CSS
Sa tutorial na ito, malalampasan mo ang paglikha ng mga nababaluktot na advanced na mga diskarte sa pag-hover gamit ang mga katangian ng CSS2.1.
13.
Mabilis na Mga Rollover Nang Wala
preload
Kapag gumagamit ng mga CSS rollover ng imahe, dalawa, tatlo, o higit pang mga imahe ay dapat na mai-load (at madalas na preloaded para sa pinakamahusay na mga resulta). Alamin kung paano ilagay ang lahat ng mga estado sa isang imahe na ginagawang mas mabilis ang mga pabago-bagong pagbabago at hindi nangangailangan ng paunang pag-preload.
14.
jQuery Rounded Corners
Maraming mga epekto ng jQuery para sa mga bilugan na sulok at marami pang mga pattern.
15.
Pinakamadaling Tooltip at Pag-preview ng Imahe Gamit ang jQuery
Tingnan ang 3 mga halimbawa ng paggamit ng jQuery rollover preview script. Ang simpleng script na ito ay maaaring mailapat para sa iba't ibang mga layunin.
16.
Supersized - Buong Background ng Screen /
Slideshow
jquery plugin
Ang Superzided ay isang plugin ng jQuery na nagbabago ang laki ng mga imahe upang punan ang browser habang pinapanatili ang ratio ng sukat ng imahe at pag-ikot ng Mga Larawan / background sa pamamagitan ng pag-slide sa mga transisyon at paunang pag-preload.
17.
PNG Overlay
Naranasan mo na ba ang problema sa paglikha ng isang site na may mga larawan na ibinigay ng kliyente, upang makita lamang sa paglaon pagkatapos na i-update nila ang kanilang pagkuha ng larawan ang orihinal na hitsura at pakiramdam ay hindi napanatili? Ang solusyon na ito ay nagsasangkot ng paglikha ng isang transparent na overlay ng PNG na maaaring magamit bilang isang mask / frame sa paligid ng regular na JPEG o GIF. Sa ganitong paraan, maaaring mai-configure ang isang tipikal na pag-install ng CMS upang makapag-upload ang mga gumagamit ng mga larawan nang hindi kinakailangang mag-alala tungkol sa paggamit ng anumang programang grapiko upang maglapat ng mga filter.
18.
BeZoom
Malakas ang timbang
JQuery
zoom-plugin
Ang BeZoom ay isang simple at magaan na kahalili para sa JQZoom. Ito ay mas magaan at mas madaling gamitin.
19.
Paggamit ng jQuery para sa Mga Animasyon ng Imahe sa Background
Maglaro sa jQuery at baguhin ang posisyon ng imahe sa background upang lumikha ng uri ng epekto na iyong hinahanap. Mayroong isang bagong artikulo na sumasagot sa "Paano ko hahawakin ang mga aktibong estado?" - Paghawak ng Aktibong Estado para sa jQuery Animated Background.
20.
5 Mga paraan upang pagandahin ang Iyong Mga Larawan gamit ang CSS
Narito ang ilang simpleng mga trick upang magdagdag ng ilang lasa sa iyong tipikal na mga imahe na walang laman. Ang paggamit ng Photoshop upang mai-istilo ang bawat imahe ay maaaring nakakapagod at mahirap mapanatili sa pangmatagalan. Ang mga sumusunod na diskarte sa CSS ay makakatulong sa iyo na madali ang sakit na iyon.
21.
Paano:
Nabago ang laki
Larawan ng Background
Alamin kung paano mag-set up ng resizeable na background na imahe sa CSS. Mayroon kang 3 pagpipilian upang pumili mula sa.
22.
Estilo ng Iyong Mga Link ng Larawan
Ang pagpapaalam sa mga gumagamit na ang partikular na seksyon ng aming website ay sinadya upang ma-click sa ay pinakamahusay na nakakamit sa pamamagitan ng higit sa bisa ng mouse. Ang mga seksyong "naki-click" ay tiyak na may kasamang mga imahe ng nilalaman. Ang Link ng Larawan ay isang script na nagbibigay-daan sa iyo upang maglapat ng karagdagang estilo sa iyong mga link sa imahe.
23.
Maramihang Mga Imahe sa Background na may CSS
Sa mga oras, mas may katuturan na gumamit ng mga imahe sa background kaysa sa ipasok ang mga ito nang direkta sa pahina. At habang ang bawat elemento - tulad ng iyong body tag - ay maaaring maghawak ng isang larawan sa background, maaari silang mailapat sa maraming mga elemento.
24.
Mga Hangganan ng Imahe na may CSS
Talagang madaling tutorial na nagpapakita sa iyo kung paano magdagdag ng solidong hangganan sa mga imahe gamit ang CSS.
25.
Mga CSS Sprite nang hindi Gumagamit ng Mga Imahe sa Background
Alamin kung paano mag-apply ng hover effect nang walang maraming kaalaman tungkol sa mga CSS sprite.
