Sprites CSS - cilat janë ato dhe si t'i përdorin ato. si të bëni css sprites

Mirëdita, sot dua t'ju tregoj se si të krijoni ikona css sprite për faqen tuaj. Po, në çështje të tjera, jo vetëm ikonat, por edhe çdo element tjetër, për shembull, butonat, menutë, etj. Të paktën grafika e të gjithë faqes së uljes.

Artikulli duhet të shkojë te titulli, pasi përdorimi i sprites përshpejton ngarkimin e faqeve, për faktin se një fotografi, qoftë edhe më e madhe, ngarkohet më shpejt se disa më të vogla. Kjo për shkak se ka më pak udhëtime vajtje-ardhje në server.

Për ata që nuk janë në këtë temë, sprite duket kështu:

Kjo do të thotë, në lidhje me ueb-in, kjo është një foto me shumë elementë, secila prej të cilave shfaqet në vendin e duhur në faqe për shkak të pozicionimit.

Por pyetjen se sa më shpejt apo më ngadalë ngarkohet faqja duke përdorur sprites, do ta prek në artikullin tjetër dhe patjetër do të bjerë në kategorinë e duhur. Pra abonohuni në Cicëroj për të mos humbur shpalljen e artikullit.

Dhe në këtë postim, do të përpiqem t'ju tregoj funksionet e brendshme se si përdoren spritet në ueb, duke përdorur shembullin e ikonave të blogut tim.

Pra, krijova një ikonë të thjeshtë sprite në Photoshop. Nuk u mërzita shumë, por bëra nja dy prej secilit prej llojeve, për të treguar jo vetëm se si përdoret sprite, por edhe sesi spritet mund të përdoren për të krijuar pseudoanimacion.

Krijimi i një shënjimi css sprite - html

Tani ju duhet të skiconi shënimin html. Asgjë e pazakontë. Lista e pa renditur:

Në vend të "#" - shkruani adresat e llogarive tuaja. Shtoni një titull në lidhje. Tani le të kalojmë te stilimi!

Krijimi i një css sprite - css markup

Vendosni stilet e kontejnerëve:

Socseti (
gjerësia: 270 px
lartësia: 150 px;
diferenca: 200 px automatike;
sfond: url(../images/bg-soc.png) pa përsëritje;
mbushje: 15 px
}

Përshkrimi i stileve për tekstin dhe një listë të parregulluar që noton në të majtë (procedura standarde për menutë dhe elementë të ngjashëm)

Socseti ul (
vërshoj: i fshehur;
gjerësia: 246 px;
margjina: 20 px automatike;
}

Socseti ul li (
noton: majtas;
margjina-majtas:2px;
}

Socseti ul li: fëmija i fundit(
margjina-djathtas: 2px
}

Tani fillon argëtimi. Vendosni stile të përgjithshme për lidhjet:

Socseti ul li a (
shfaqja:blloku;
gjerësia: 59 px
lartësia: 59 px;
}

Siç mund ta shihni, bëra pak gabim kur krijuam sprite, gjë që rezultoi në një madhësi idiotike 59x59 px - por kjo nuk ndikoi në përvojën vizuale. Le te vazhdojme...
Vendosni një imazh të sfondit për lidhjen e parë.

a. Cicëroj(

tranzicioni: .3s;
}
a. twitter: rri pezull(

tranzicioni: .3s;
}

Në mënyrë që elementi i nevojshëm i spritit të shfaqet, ai duhet të pozicionohet. Për ta bërë këtë, pasi të vendoset sfondi i lidhjes, duhet të vendosni koordinatat.

Për shembull, mund të keni vënë re se elementi i parë në sprite është ikona e rrjetit social Vkontakte dhe ikona e parë në menynë sociale. ikonat - "Twitter". Kjo do të thotë, nëse ikonat e mia janë të gjera 59 px, atëherë më duhet të lëviz sfondin me -59 px. Gjithashtu, dua që ngjyra të ndryshojë nga gri në ngjyrë. Për ta bërë këtë, më duhet të ul sfondin me 59 px. Që tregohet këtu:

a. Cicëroj(
sfond: url(../images/css-sprite-iconok2.png) -59px -59px pa përsëritje;
tranzicioni: .3s;
}

Në mënyrë që stilet e klasave të ndryshojnë në hover, ju duhet të vendosni pseudo-klasën e pezullimit. Çfarë jam duke bërë këtu:

a. twitter: rri pezull(
sfond: url(../images/css-sprite-iconok2.png) -59px 0 pa përsëritje;
tranzicioni: .3s;
}

Dhe në mënyrë që fotografia të ndryshojë pozicionin, unë ndryshova koordinatat e ekranit.

Vetia e tranzicionit përdoret për të vendosur shpejtësinë me të cilën ndryshon pozicioni. E vendosa në 0.3 sekonda.

Në mënyrë të ngjashme, ju duhet të vendosni pozicionin për pjesën tjetër të elementeve sprite, duke e zhvendosur atë me 118 px për të shfaqur ikonën RSS dhe ta ktheni atë në 0 px për të shfaqur ikonën VK.

Shpresoj se artikulli ishte i dobishëm për ju, dhe tani do të përdorni css sprites për faqet tuaja. Nesër do të përpiqem të analizoj se sa më shpejt ngarkohet faqja kur përdoret kjo teknologji.

Rreth një javë më parë, një nga pajtimtarët e mi më kërkoi të flisja spritet CSSçfarë është në përgjithësi dhe me çfarë hanë. Prandaj, sot vendosa të shkruaj këtë artikull në të cilin do t'ju tregoj, çfarë janë spritet CSS dhe ku përdoren ato.

css sprite- ky është një imazh i kombinuar që përmban shumë fotografi të ndryshme, dhe duke përdorur pronën pozicioni i sfondit vendosim foton e duhur në vendin e duhur. Le të themi se kemi një buton dhe ky buton ndryshon pamjen e tij kur kaloni pezull mbi të me kursorin e miut. Ju mund të bëni, për shembull, 2 fotot dhe më pas zëvendësoni një ose një fotografi tjetër si sfond të butonit. Por disavantazhet e kësaj metode janë të dukshme: 2 herë më shumë skedarë, afërsisht 2 herë më e madhe, pra, në 2 herë më shumë kohë ngarkimi se 1 imazh. Dhe kështu Teknika CSS sprite ju lejon të krijoni vetëm një foto, e cila do të bëhet menjëherë 2 sfond butoni.

Për ta bërë më të qartë, le ta zgjidhim këtë problem. Ne kemi një imazh, le të themi, lartësi 20 pikselë dhe gjerësi 100 piksele. Butoni ka një gjerësi 50 piksele dhe lartësi 20 piksele. Në njërën foto vendosim imazhe të të dyja gjendjeve (njëra pas tjetrës). Kodi HTML do të jetë kështu:

Butoni

DHE Kodi CSS:

A(
sfond: url ("button.jpg") pa përsëritje majtas sipër; // Sfondi i butonit
shfaqja:blloku; // Bëjeni atë një element blloku
lartësia: 20 px; // Lartësia e butonit
gjerësia: 50 px // Gjerësia e butonit
tekst-dekorim: asnjë; // Hiq nënvizimin
}
a: rri pezull (
pozicioni i sfondit: lart djathtas; // Ndrysho pozicionin e sfondit për të kompensuar imazhin
}

Në një mënyrë kaq dinake, mund të ruani shumë imazhe në një foto. Theksoj se është grup imazhesh, dhe jo vetëm 2 . Ndonjëherë pothuajse e gjithë faqja përbëhet nga një fotografi, e cila përmban të gjitha imazhet e përdorura. Unë nuk mendoj se kjo është shumë e mirë, por do të ketë një numër minimal skedarësh imazhi dhe një madhësi minimale të ngarkimit të faqes, e cila është gjithmonë e mirë.

Pëlqyer:
27

Të papëlqyera: 4

Nuk ka përkthim.

sprite

përpara ose pas"para""pas""pas"

zog i zemëruar i zemëruar.png. index.html

Nuk ka përkthim.

Spritet CSS janë grafika për faqen tuaj të internetit të kombinuara në një skedar grafik. "Pse një skedar?" - ju pyesni. Fakti është se kjo qasje për ruajtjen e imazheve ju lejon të rritni performancën e faqeve në internet, si dhe të ruani imazhet grafike në një mënyrë më të organizuar. Le të hedhim një vështrim në disa nga praktikat më të mira për përdorimin e sprites. Vetë emri i sprites mund t'ju kujtojë spritet e lojërave, konzolat retro të lojërave dhe madje edhe lojërat e shfletuesit që janë kaq të njohura sot:

Pra, e zbatueshme për dizajnin e uebit, sprite- është vetëm një skedar i madh që përmban disa imazhe për faqen tuaj, duke kursyer kohë në shkarkimin dhe transferimin e skedarit përmes rrjetit. Kur një sprite përmban, për shembull, 20-30 imazhe, kjo mund të lehtësojë ndjeshëm ngarkesën në server, sepse nëse këto imazhe do të ruheshin veçmas, serveri do të duhej të bënte përkatësisht 20-30 kërkesa të veçanta për të marrë çdo imazh të tillë. . Falë spritit, vetëm një kërkesë HTTP shkon në server - për të marrë një imazh të vetëm. Sprite mund të mos duket vizualisht "e lexueshme" për syrin, pasi detyra e saj kryesore është vetëm të mbledhë "copë" të ndryshme të dizajnit tuaj së bashku. Për shembull, një sprite mund të duket kështu:

Sprites përdoren nga shumica e faqeve moderne, dhe VKontakte i mirënjohur nuk bën përjashtim. Për shembull, kjo është mënyra se si ruan "pjesë" të ndërfaqes në një skedar - domethënë, ikona të njohura për të gjithë:

Pika thelbësore e përdorimit të spriteve CSS është se ju duhet të dërgoni vetëm një skedar grafik që përmban të gjitha imazhet tuaja në server, jo shumë imazhe individuale - dhe përmes CSS mund të shfaqni çdo segment të vogël nga ky skedar grafik si sfond për një element. Disa njerëz mendojnë se imazhet individuale ngarkohen më shpejt, por kjo nuk është kështu. Kur ngarkojmë një skedar grafik me shumë fotografi, ne dërgojmë vetëm një kërkesë në server, dhe kur ngarkojmë një numër të madh fotografish, dërgojmë më shumë kërkesa në server. Kombinimi i imazheve në një skedar të vetëm lejon jo vetëm të reduktojë ndjeshëm numrin e kërkesave HTTP, pordhe zvogëloni madhësinë e përgjithshme të skedarit të imazhit.

Më lejoni t'ju jap një shembull tjetër të një sprite. Ja se si një faqe e njohur perëndimore e dedikuar për dizajn ruan elemente grafike:

Ju mund të pyesni - kur është koha më e mirë për të përgatitur një sprite? Ka dy qasje të ndryshme për këtë.

Qasje të ndryshme - krijimi i një sprite para dhe pas krijimit të një siti

Ekzistojnë dy qasje të zakonshme kur krijoni një fletë spriteshe - bëjeni atëpërpara ose pasduke krijuar faqen tuaj. Mund t'i vendosni të gjitha imazhet në fletën sprite përpara se të krijoni sitin. Kjo është ajo që ne e quajmë qasje"para". Përveç kësaj, ju mund të krijoni të gjitha imazhet si skedarë të veçantë, duke i bërë ato më të lehta për t'u modifikuar. Pasi të ndërtohet faqja dhe të gjitha imazhet të jenë gati, mund të krijoni shpejt dhe me lehtësi një fletë sprite, ose me dorë ose duke përdorur një nga disa mjete. Kjo është ajo që ne do ta quajmë qasje"pas". Nëse fletët sprite janë të reja për ju ose jeni i ri në dizajnin e uebit, atëherë qasja është më e përshtatshme për ju."pas". Ka shumë shërbime, shërbime dhe programe për t'ju ndihmuar të krijoni sprite, shumica e të cilave shpërndahen dhe disponohen falas.

Rregullimi i fotografive në një sprite në mënyrë të organizuar

Kur krijoni një sprite në Photoshop, këshillohet që menjëherë të vendosni të gjitha imazhet në mënyrë të organizuar dhe në një sekuencë specifike të zgjedhur nga ju, në mënyrë që më vonë të jetë e lehtë dhe e thjeshtë për të punuar me to. Përpiquni të grumbulloni gjithmonë hapësirën për çdo imazh sprite në 10 pikselat më të afërt, ose lini më shumë hapësirë ​​rreth tyre nëse janë të gjithë të njëjtën madhësi. Kur bëhet fjalë për të shkruar stilimin CSS, nuk do t'ju duhet të shkruani matjet e koordinatave dhe do të keni më pak gjasa të harroni numrat me koordinatat e imazheve të dëshiruara. Këtu është një shembull i një vendosjeje të suksesshme të imazheve të ndryshme në një sprite:

Nga teoria në praktikë! Si të krijoni një zog të animuar Angry Birds duke përdorur një Sprite

Pra, ne u njohëm me konceptin e një sprite në dizajnin e uebit, por teoria pa praktikë nuk është asgjë. Prandaj, tani do të krijojmë spritin tonë të parë me ju dhe do të mësojmë se si të bëjmë një animacion të thjeshtë në një faqe HTML. Shembulli ynë do të bazohet në një personazh nga loja Angry Birds - ky është një zog qesharak i kuq. Së pari, le të përgatisim një imazh sprite në formatin .PNG që përmban 4 faza të animacionit të shpendëve:

Le të krijojmë një drejtori diku në disk zog i zemëruar- aty do të vendosim skedarët e shembullit tonë. Ne ruajmë sprite me zogj në këtë direktori dhe emërtojmë skedarin i zemëruar.png. Hapi tjetër është krijimi i një skedari në të njëjtën direktori me emrin index.html- kjo do të jetë faqja jonë e testimit me animacion. Më pas, hapni këtë skedar në redaktues dhe vendosni kodin e mëposhtëm atje:

Më lejoni të shpjegoj pak se çfarë kemi bërë. Së pari, ne i dhamë dokumentit tonë HTML një kodim UTF-8, që do të thotë se ne duhet të mbajmë tonën index.html në këtë kodim. Ju gjithashtu mund të vendosni një tjetër, për shembull, Windows-1251, nuk është thelbësore për detyrën tonë. Më pas, lidhëm skedarin e stilit me dokumentin stil.css(nuk është ende në katalogun tonë) zog i zemëruar, do ta krijojmë më vonë). Ne gjithashtu vendosëm një lidhje me një skript të jashtëm dhe lidhëm bibliotekën jQuery - me ndihmën e jQuery ne do të ndryshojmë në mënyrë dinamike fotografitë e zogut tonë dhe do të ndryshojmë "fazat" e tij nga sprite. Ne kemi përgatitur gjithashtu një bllok të brendshëm JavaScript, ku do të vendosim kodin që bën animimin e zogut. Epo, dhe së fundi, pjesa kryesore e dokumentit përmban një hiperlidhje të vetme, brenda së cilës është një bllok DIV, dhe ID-ja e tij është vendosur si birdImage, dhe klasa e parazgjedhur është bird-sleeping. Kjo do të thotë që zogu ynë do të "flejë" kur hap faqen - kjo korrespondon me imazhin e poshtëm majtas brenda spritit - ku sytë e saj janë të mbyllur. Tani është koha për të "prerë" spritin tonë, d.m.th. nxirrni imazhe individuale prej tij.

Prerja e një sprite duke përdorur shërbimin SpriteCow.Com

Detyra e "prerjes" së një sprite është mjaft e mundimshme - kërkon kujdes për të mos gabuar me koordinatat që përcaktojnë çdo imazh në sprite. Për fat të mirë, sot ka shërbime që e heqin plotësisht këtë dhimbje koke nga projektuesi dhe stilisti. Unë përdor dhe rekomandoj http://spritecow.com për prerje. Thelbi i shërbimit është i thjeshtë dhe shumë i përshtatshëm - ne zgjedhim çdo imazh zogu me miun, dhe SpriteCow na jep një kod të gatshëm CSS me koordinata. Gjithçka që duhet të bëjmë është të vendosim 4 stile për secilën fazë të zogut! Pasi kemi hyrë në sit, shohim 2 butona - "Open Image" dhe "Trego Shembull". Ne kemi nevojë për butonin e parë, klikoni mbi të:

Në dialogun që hapet, zgjidhni skedarin tonë sprite angry.png, pas së cilës ne shohim se si sprite jonë u ngarkua në sit. Më pas, ne duhet të përcaktojmë ngjyrën e sfondit, për këtë ne klikojmë në shiritin e veglave "Zgjidh sfondin" dhe tregojmë në zonën e bardhë të spritit tonë - kjo do të shkurtojë saktë çdo fazë të zogut:

Zgjidhni imazhin e parë dhe merrni automatikisht kodin CSS për të:

Tani, është koha për të krijuar në katalogun tonë zog i zemëruar skedar stili stil.css. Ne fusim në mënyrë sekuenciale 4 pjesë të gjeneruara të kodit CSS atje, por në vend të klasës standarde .sprite që na ofrohet nga SpriteCow, le t'i quajmë stilet tona më të kuptueshme. Gjithashtu, duke qenë se imazhi sprite ruhet direkt në rrënjën e drejtorisë, ne do të heqim elementin e panevojshëm të rrugës nga vetia e sfondit - imgs/. E kam marrë kështu:

/* zog "i rregullt". Imazhi lart majtas në sprite */ .bird-normal ( sfondi: url("angry.png") pa përsëritje -12px -16px; gjerësia: 97px; lartësia: 94px; ) /* Zogu "Happy". Imazhi lart djathtas në sprite */ .bird-happy ( sfondi: url("angry.png") pa përsëritje -118px -17px; gjerësia: 97px; lartësia: 94px; ) /* Zogu "Fjetur". Imazhi poshtë majtas në sprite */ .bird-sleeping ( sfondi: url("angry.png") pa përsëritje -12px -120px; gjerësia: 97px; lartësia: 94px; ) /* Zogu "Angry". Imazhi poshtë djathtas në sprite */ .bird-angry ( sfondi: url("angry.png") pa përsëritje -118px -120px; gjerësia: 97px; lartësia: 94px; )

Hapi i fundit është të shkruani kodin jQuery që krijon animacionin.

Tani që kemi prerë me sukses spritin dhe kemi vendosur 4 stile për secilën imazh në skedarin tonë stil.css, thjesht duhet të shkruajmë kodin jQuery që do të shtojë animacion kur rri pezull mbi lidhjen tonë dhe kur klikohet lidhja. Siç e kujtojmë, si parazgjedhje kemi grupin e klasës së gjumit të shpendëve, d.m.th. Zogu ynë i kuq do të "fle" kur hap një dokument :)

I gjithë animacioni do të bazohet në 3 metoda jQuery:

• hover - mbajtës për lëvizjen pezull mbi lidhjen dhe "lënien" e kursorit nga lidhja. Kur lëvizim kursorin, zogu do të "zgjohet" - d.m.th. klasa do të bëhet normale
• mousedown - mbajtës për klikim të butonit të majtë të miut në një lidhje. Në këtë rast, zogu do të bëhet "i lumtur" - d.m.th. Bllokut DIV do t'i jepet zogu i klasës i lumtur
• mouseup - mbajtës për lëshimin e butonit të majtë të miut. Kur lirohet, zogu do të "zemërohet" - d.m.th. Bllokut DIV i jepet klasa e zemërimit të shpendëve

Pra, ngjisni kodin e mëposhtëm në vendin që përgatitëm në bllokun e brendshëm JavaScript të vendosur në faqe:

$(document).ready(function() ( // këtu është kodi i jQuery që krijon animacionin $("#birdImage").hover(function() ( $(this).removeClass("bird-sleeping"); $ (this).removeClass ("zogu i zemëruar"); $(this).removeClass("zogu i lumtur"); $(this).addClass("zogu-normal"); ), funksion() ( $( this ).removeClass("zogu-normal"); $(this).removeClass("zogu i zemëruar"); $(this).removeClass("zogu i lumtur"); $(this).addClass("zogu- në gjumë" "); )); $("#birdImage").mousedown(funksion() ($(this).removeClass("zogj-fjetur"); $(this).removeClass("zogj-normal"); $( this).removeClass("zogu i zemëruar"); $(this).addClass("zogu i lumtur"); )).mouseup(function() ($(this).removeClass("zogjtë e fjetur") $ (this).removeClass("zogu-normal");$(this).removeClass("zogu-happy");$(this).addClass("zogu-i zemëruar"); )); ));

Gati! Testimi i animacionit

Epo kjo është e gjitha! Zogu ynë është gati dhe i dha jetë faqes me animacionin e tij! :) Mund ta shikoni demonstrimin. Shkarkoni arkivin me një shembull - në fund të artikullit.

Industria e kompjuterave është rritur shumë, shumë lartë vitet e fundit. Nëse më parë lojërat kompjuterike ishin vetëm argëtim për një rreth të ngushtë fansash, tani është diçka më shumë. Ato mund të luhen nga njerëz të të gjitha moshave dhe krijohen dizajne që i përshtaten edhe shijeve më delikate. Dhe më e rëndësishmja, janë shfaqur mundësi të pabesueshme që nuk mund të ishin menduar më parë, kështu që tani lojërat kompjuterike mund të jenë pothuajse të padallueshme nga realiteti për sa i përket grafikës dhe fizikës, ato mund ta zhytin përdoruesin në botë të panjohura, duke e lejuar atë të jetojë histori të pabesueshme dhe të jetë çelësi i tyre.karakteri. Por në të njëjtën kohë, disa njerëz nuk duan të kufizohen në procesin e "të luajturit" - ata janë të magjepsur nga procedura e krijimit të lojërave. Megjithatë, shumica e këtyre ëndërrimtarëve mbeten në nivelin e fantazisë, sepse besojnë se ky proces është shumë i ndërlikuar. Në të vërtetë nuk është kështu, siç dëshmohet nga numri i madh i zhvilluesve indie që tani po prodhojnë shumë projekte pa buxhete të mëdha dhe mbështetje nga botuesit. Thjesht duhet të filloni pak dhe gradualisht të ecni përpara. Në këtë artikull, do të mësoni se çfarë janë spritet për lojëra dhe si t'i përdorni ato, në mënyrë që më pas të filloni të krijoni projektet tuaja.

Çfarë janë spritet?

Nëse keni një lojë kompjuterike në monitor përpara jush, atëherë çfarë shihni para jush? Predha grafike e këtij projekti, një shumëllojshmëri tekstesh të përbëra nga pikselë të vegjël. Nëse planifikoni të krijoni një lojë kompjuterike, atëherë duhet të punoni shumë me grafikë. Por nëse nuk po synoni ende një projekt të madh, atëherë nuk keni nevojë të punoni në mënyrë perfekte me redaktorët grafikë 3D. Këtu do t'ju ndihmojnë Sprites për lojëra që mund t'i shkarkoni në internet. Por çfarë është ajo? Si mund t'i përdorni ato dhe si do ta lehtësojë detyrën tuaj? Spritet e lojërave janë tekstura të gatshme për personazhe, artikuj e kështu me radhë që mund t'i shkarkoni në kompjuterin tuaj dhe më pas t'i përdorni në procesin e krijimit të një loje. Kjo do të thotë që nuk do t'ju duhet të vizatoni çdo objekt në lojë, si dhe çdo fazë të lëvizjes së tij - tashmë do t'i keni të gjitha këto të gatshme. Siç mund ta shihni, spritet e lojës mund ta bëjnë vërtet jetën tuaj shumë më të lehtë.

Pamje Sprite

Tani ju keni një ide të përgjithshme se çfarë janë spritet e lojës, por kjo nuk do të jetë e mjaftueshme për t'i përdorur ato në praktikë. Ju duhet të kuptoni se çfarë saktësisht janë dhe si t'i zbatoni ato në krijimin e lojërave. Nëse do të përdorni sprites, atëherë duhet t'i shkarkoni në kompjuterin tuaj. Në shumicën e rasteve, ato do të duken si një skedar grafik i madh apo edhe i madh, në të cilin dhjetëra apo edhe qindra imazhe të vogla do të vendosen në një sfond transparent. Prandaj, mund ta prisni këtë skedar të madh në të vogla në mënyrë që të keni akses të drejtpërdrejtë në spritet tuaja. Ju mund të mos keni nevojë për disa prej tyre dhe mund t'i shkurtoni, kështu që kjo metodë është shumë më e përshtatshme sesa shkarkimi i dhjetëra ose qindra imazheve individuale. Thjesht zgjidhni një skedar të madh, shënoni një zonë dhe keni gati një sprite.

Duke përdorur sprites

Siç e kuptoni mirë, në shumicën e rasteve do të mund të gjeni sprite për lojërat 2D, pasi imazhet 3D nuk janë aq të standardizuara, kështu që do të duhet shumë hapësirë ​​për të përcjellë të gjitha lëvizjet e një objekti 3D. Në të njëjtën kohë, puna me sprites 2D është jashtëzakonisht e lehtë. E tëra çfarë ju duhet të bëni është të ngarkoni spritet në redaktorin ku po krijoni dhe t'i bashkoni ato së bashku për të krijuar efekte lëvizjeje. Dhe pastaj ngarkoni në nivel dhe shijoni rezultatin.

Kalimi nga spritet në grafikë

Ju nuk do të jeni në gjendje të përdorni spritet për pjesën tjetër të jetës tuaj për të krijuar lojëra, kështu që nëse i vendosni vetes synime ambicioze, ose duhet të mësoni se si të punoni ose të kërkoni një asistent që e njeh këtë aftësi.

Ka shumë metoda për optimizimin e faqeve në internet. Disa prej tyre funksionojnë, disa jo. Megjithatë, ka disa metoda që janë të detyrueshme për çdo faqe dhe blog. Një prej tyre doja të flisja me ju.

Një nga metodat kryesore të optimizimit të faqeve të internetit. Prandaj, sot do të flasim se si të kombinojmë spritet e imazheve në sit në CSS, duke rritur kështu shpejtësinë e ngarkimit të tyre.

Pak histori

Në të kaluarën e largët, të largët, kur modemët po cicëronin në apartamente dhe shpejtësia e lidhjes nuk i kalonte 5 Kbps, njerëzit menduan mbi detyrën e vështirë se si t'i bëni faqet të ngarkojnë më shpejt dhe në të njëjtën kohë të mos paguanin shuma përrallore për trafikun në hyrje. Ata menduan, kështu menduan dhe dolën me idenë për të renditur imazhet e përdorura në faqe në sprite.

Dhe ne ikim ...

Kombinimi i imazheve në një sprite

Dhe kështu, siç zbuluam më herët, një sprite është disa imazhe të rregulluara në një njësi në një sfond transparent, të cilat arrihen duke përdorur veçorinë CSS pozicioni i sfondit. Por ju lutem mos e ngatërroni me një kolazh. Sprite ≠ kolazh.

Për të marrë një sprite, duhet t'i përshtatni të gjithë butonat, ikonat, plumbat dhe gërmadhat e tjera sa më kompakte të jetë e mundur në një skedar PNG. Mos harroni se sfondi duhet të jetë transparent. Tani le të hedhim një vështrim në një shembull.

Le të themi se kemi një skedar PSD me një buton kaq të bukur në 3 gjendje.

Çfarë bën një bloger-koder mesatar autodidakt? Ai pret butonin në çdo gjendje dhe e ruan atë në skedarë të veçantë. Kjo do të thotë, një buton merr 3 fotografi nga ky person i këndshëm. Dhe nëse tensionoheni, atëherë mbani mend se çdo foto në faqe është një kërkesë shtesë HTTP që ngarkon serverin dhe blogu juaj po funksionon më ngadalë dhe më ngadalë dhe më ngadalë dhe më ngadalë dhe më ngadalë dhe më ngadalë dhe më ngadalë ...

Për të parandaluar që kjo të ndodhë, është shumë më logjike ruajeni butonin në një skedar. Për ta bërë këtë, ne hapim të njëjtin skedar PSD, heqim shigjetat, mbishkrimet dhe sfondin e padobishëm prej tij dhe rregullojmë të gjitha gjendjet e butonit sa më afër njëra-tjetrës pa mbivendosje.

Ja me çfarë përfunduam. Në asnjë rast butonat nuk duhet të kryqëzohen me njëri-tjetrin.

E shkëlqyeshme, ne kemi përgatitur një skedar grafik, tani më lejoni t'ju tregoj se si ta krijoni atë.

Paraqitja e Sprite

Paraqitja e spriteve CSS nuk është e ndryshme nga paraqitja e fotografive të zakonshme, me përjashtim të një POR. Ju duhet të dini jo vetëm madhësinë e saktë të imazhit që dëshironi të shfaqni, por edhe koordinatat e tij. Për shembull, i gjithë spriti ynë është 330 px i gjerë dhe 150 px i lartë.

Por ne duhet të japim vetëm një buton me gjerësi 227 px me lartësi 41 px, duke specifikuar koordinatat e tij të sakta. Nëse nuk keni një redaktues të mirë html, unë mundem.

Krijo një skedar index.html dhe shkruani linjat e nevojshme të kodit, doctype dhe të gjitha këto në të.

Pasi të jenë kryer të gjitha veprimet standarde, le të përpiqemi të shfaqim butonin tonë.

Pas Etiketës trupi krijoni një enë div me klasën butonin- ky do të jetë butoni ynë.

Këtu përfundon html-ja jonë dhe tani duhet të shkruajmë stilet CSS për butonin.

Kodi më poshtë tregon se ne fillimisht deklarojmë një klasë butonin. Pastaj duke përdorur vetitë lartësia dhe gjerësia vendosni madhësinë e butonit tonë. Pronës sfond ju lejon të zgjidhni një skedar që do ta përdorim si sprite, dhe pozicioni i sfondit vendosim koordinatat e imazhit që na duhen në këtë sprite. Gjithçka është e thjeshtë.

Le të hedhim një vështrim më të afërt të pronës pozicioni i sfondit.

Siç mund ta shihni nga kodi i mësipërm, ai ka dy kuptime. Vlera e parë ju lejon të vendosni koordinatat e imazhit përgjatë boshtit X, dhe e dyta, pra, përgjatë boshtit Y. Butoni ynë nuk kërcen askund përgjatë boshtit X, pasi të gjitha gjendjet janë nën njëra-tjetrën. Prandaj, në mënyrë që gjendja e dytë e butonit të shfaqet në hover, duhet të ndryshojmë vlerën përgjegjëse për boshtin Y.

Siç e dini, dhe nëse jo, atëherë po, çdo buton ka disa gjendje.

1. Normal - gjendje normale ose normale
2. Hover - gjendja e butonit kur qëndron pezull mbi
3. Aktive - gjendja e butonit në momentin e shtypjes

Ne kemi përfituar nga këto prona.

Nëse jeni shumë dembel për të bërë manualisht sprite dhe në përgjithësi shqetësoheni me Photoshop, një shërbim i mrekullueshëm falas do t'ju ndihmojë: spritepad.wearekiss.com. Thjesht hidhni fotografitë e nevojshme në hapësirën e punës dhe kjo do të krijojë një sprite për ju.

Në paraburgim

Spritet CSS janë një hap shumë i rëndësishëm në përshpejtimin e faqes suaj të internetit. Trajtojeni atë me respektin e duhur dhe përpiquni ta përdorni kudo.