CSS sprites - cilat janë ato dhe si t'i përdorin ato. Krijoni sprite të CSS. Shembuj Shkarkoni sprites png

Pëlqehet:
27

Nuk i pëlqen: 4

Nuk ka përkthim të disponueshëm.

sprite

para ose pas"para""pas""pas"

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

UTF-8 indeksi.html dritare-1251 stili.css zog i zemëruar

http://spritecow.com

i zemëruar.png,

zog i zemëruarskedar stili stili.css imazhe /.Doli kështu:

Nuk ka përkthim të disponueshëm.

CSS sprites janë grafikë 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 mund të përmirësojë performancën e faqeve të internetit, si dhe të ruajë imazhe 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ë lojërat sprites, konsolat e lojërave retro dhe madje edhe lojërat e shfletuesit që janë kaq të njohura sot:

Pra, e zbatueshme për Web Design, sprite është vetëm një skedar i madh që përmban disa imazhe për faqen tuaj, duke kursyer kohë për të shkarkuar dhe transferuar skedarin në rrjet. Kur një sprite, për shembull, përmban 20-30 imazhe, kjo mund të lehtësojë ndjeshëm ngarkesën në server, pasi që nëse këto imazhe do të ruheshin veçmas, serveri do të duhej të bënte 20-30 kërkesa të ndara, përkatësisht, për të marrë secilën imazh të tillë. Falë sprite, vetëm një kërkesë HTTP i bëhet serverit - për të marrë një imazh të vetëm. Një sprite vizualisht nuk mund të duket plotësisht "i lexueshëm" për syrin, pasi detyra e tij kryesore është vetëm të bashkojë "pjesë" të ndryshme të dizajnit tuaj së bashku. Për shembull, një sprite mund të duket kështu:

Shumica e vendeve moderne përdorin sprites dhe VKontakte i mirënjohur nuk bën përjashtim. Për shembull, kështu i ruan "pjesët" e ndërfaqes në një skedar - domethënë, ikonat e njohura:

Pika thelbësore e përdorimit të spriteve CSS është që serveri duhet të dërgojë vetëm një skedar grafik që përmban të gjitha imazhet tuaja, dhe jo shumë imazhe individuale - dhe përmes CSS mund të shfaqni çdo segment të vogël nga kjo skedar grafik si sfond për një element. Disa njerëz mendojnë se imazhet individuale ngarkohen më shpejt, por nuk janë të tilla. Duke ngarkuar 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, ne dërgojmë më shumë kërkesa në server. Kombinimi i imazheve në një skedar lejon jo vetëm të zvogëlojë ndjeshëm numrin e kërkesave HTTP, pordhe zvogëloni madhësinë e përgjithshme të skedarit të figurës.

Këtu është një shembull tjetër i një sprite. Kjo është mënyra se si një uebfaqe e njohur perëndimore ruan elementet grafike:

Kur është koha më e mirë për të përgatitur një sprite, mund të pyesni? Ekzistojnë dy qasje të ndryshme për këtë.

Qasje të ndryshme - krijimi i një sprite përpara dhe pas krijimit të faqes në internet

Ka dy qasje të zakonshme kur krijoni një fletë sprite - bëjeni atëpara ose pasduke krijuar faqen tuaj te internetit. Ju 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ë, gjë që e bën më të lehtë redaktimin. Pasi të ndërtohet faqja dhe të përgatiten të gjitha imazhet, mund të krijoni shpejt dhe lehtë një fletë sprite, qoftë manualisht ose duke përdorur një nga disa mjete. Këtë do ta quajmë qasje"pas"... Nëse fletët sprite janë të reja për ju ose jeni të ri në krijimin e faqeve në internet, 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 sprites, shumica e të cilave shpërndahen dhe disponohen falas.

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

Kur krijoni një sprite në Photoshop, këshillohet që menjëherë të vendosni të gjitha imazhet në një mënyrë të organizuar dhe në një sekuencë të caktuar të zgjedhur nga ju, në mënyrë që më vonë të jetë e lehtë dhe e thjeshtë të punohet me to. Mundohuni të grumbulloni gjithnjë hapësirën për secilën figurë sprite në 10 pikselët më të afërt, ose lini më shumë hapësirë \u200b\u200brreth tyre nëse të gjitha kanë të njëjtën madhësi. Kur bëhet fjalë për të shkruar një stil CSS, nuk do të duhet të shkruani matjet e koordinatave dhe do të keni më pak të ngjarë të harroni koordinatat e imazheve që dëshironi të përdorni. Këtu është një shembull i një vendosje të mirë të imazheve të ndryshme në një sprite:

Nga teoria në praktikë! Si të krijoni një zog të zogjve të zemëruar të animuar duke përdorur një spërkatje

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

Krijoni një direktori diku në disk zog i zemëruar- atje do të vendosim skedarët e shembullit tonë. Ruani sprite me zogj në këtë direktori dhe emëroni skedarin i zemëruar.png Hapi tjetër është krijimi i një skedari në të njëjtin direktori me emrin indeksi.html- kjo do të jetë faqja jonë e provës së animacionit. Tjetra, le të hapim këtë skedar në një redaktor dhe të vendosim kodin e mëposhtëm atje:

Më lejoni të shpjegoj pak se çfarë kemi bërë tani. Së pari, ne vendosim kodimin për dokumentin tonë HTML UTF-8, që do të thotë se duhet t'i mbajmë tonat indeksi.htmlnë këtë kodim. Mund të vendosni një tjetër, për shembull, dritare-1251, - për detyrën tonë nuk është e rëndësishme. Tjetra, ne lidhëm skedarin e stilit me dokumentin stili.css (ende nuk është në katalogun tonë zog i zemëruar, do ta krijojmë pak më vonë). Ne gjithashtu vendosëm një lidhje me një skenar të jashtëm dhe lidhëm bibliotekën jQuery - duke përdorur jQuery ne do të ndryshojmë dinamikisht fotografitë e zogut tonë dhe do të ndryshojmë "fazat" e tij nga sprite. Ne gjithashtu përgatitëm një bllok të brendshëm JavaScript, ku do të vendosim kodin që bën animacionin e zogut. Dhe së fundmi, pjesa kryesore e dokumentit përmban një hiperlidhje të vetme me një bllok DIV brenda tij, dhe ID e tij është vendosur si birdImage, dhe klasa e paracaktuar është gjumi i zogjve. Kjo do të thotë që zogu ynë do të "flejë" kur hap faqen - kjo korrespondon me imazhin e poshtëm të majtë brenda sprite - ku sytë i janë mbyllur. Tani është koha për të "prerë" sprite tonë, d.m.th. zgjidhni imazhe individuale prej saj.

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

Detyra e "prerjes" së një sprite është mjaft kohë - kërkon kujdes në mënyrë që të mos gabohemi me koordinatat që përcaktojnë secilën imazh në sprite. Për fat të mirë, sot ka shërbime që heqin plotësisht këtë dhimbje koke nga projektuesi dhe dizajnuesi i faqosjes. Unë përdor për feta dhe ju rekomandoj shërbimin http://spritecow.com. Thelbi i shërbimit është i thjeshtë dhe shumë i përshtatshëm - ne zgjedhim secilën fotografi të shpendëve me miun, dhe SpriteCow na jep një kod të gatshëm CSS me koordinata. E tëra çfarë duhet të bëjmë është të vendosim vetëm 4 stile për secilën fazë të shpendëve! Pasi kemi hyrë në sit, shohim 2 butona - "Hapni Imazhin" dhe "Trego Shembullin". Na duhet butoni i parë, kliko mbi të:

Në dialogun e hapur - zgjidhni skedarin tonë sprite i zemëruar.png,pas së cilës ne shohim se si sprite jonë u ngarkua në faqe. Tjetra, ne duhet të përcaktojmë ngjyrën e sfondit, për këtë, klikoni në shiritin e veglave "Zgjidh Sfondin" dhe tregoni në zonën e bardhë të sprite tonë - kjo do të na lejojë të prerë në mënyrë korrekte çdo fazë të zogut:

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

Tani, është koha për të krijuar në directory tonë zog i zemëruarskedar stili stili.css... Aty, ne do të fusim 4 pjesë të gjeneruara të kodit CSS, por në vend të klasës standarde.sprite që na ofrohet nga SpriteCow, le t'i quajmë stilet tona më qartë. Gjithashtu, meqenëse imazhi sprite është ruajtur direkt në rrënjën e direktorisë, ne do të heqim elementin e panevojshëm të rrugës nga vetia e sfondit - imazhe /.Doli kështu:

/ * zog "i rregullt". Imazhi sipër majtas në një sprite * / .bird-normal (sfondi: url ("angry.png") pa-përsëritur -12px -16px; gjerësia: 97px; lartësia: 94px;) / * Zogu "i lumtur". Imazhi djathtas lart në sprite * / .bird-happy (sfond: url ("angry.png") pa-përsëritur -118px -17px; gjerësia: 97px; lartësia: 94px;) / * Zogu "në gjumë". Imazhi në të majtë në sprite * / .bird-duke fjetur (sfondi: url ("angry.png") pa-përsëritur -12px -120px; gjerësia: 97px; lartësia: 94px;) / * Zogu "i zemëruar". Imazhi në fund të djathtë në një 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 për të krijuar animacionin.

Tani që kemi feta me sukses sprite dhe kemi vendosur 4 stile për secilën imazh në skedarin tonë stili.cssne thjesht duhet të shkruajmë kodin jQuery që do të shtojë animacion kur kalojmë mbi hiperlidhjen tonë dhe kur klikojmë në link. Siç kujtojmë, në mënyrë të paracaktuar kemi klasën e gjumit të zogjve, d.m.th. zogu ynë i kuq do të "flejë" kur hap një dokument :)

Të gjitha animacionet do të bazohen në 3 metoda jQuery:

• rri pezull është një mbajtës për vendosjen e kursorit mbi një lidhje dhe "lënien" e kursorit nga lidhja. Kur rri pezull kursorin, zogu do të "zgjohet" - dmth. klasa do të bëhet normale e shpendëve
• mousedown - mbajtës për klikimin e butonit të majtë të miut në një lidhje. Në këtë rast, zogu do të bëhet "i lumtur" - dmth. Bllokut DIV do t'i caktohet klasa e lumtur për shpendët
• mouseup - mbajtës për lëshimin e butonit të majtë të miut. Kur të lirohet, zogu do të bëhet "i zemëruar" - dmth. Blloku DIV caktohet i zemëruar nga shpendët e klasës

Pra, le të ngjisim kodin e mëposhtëm në vendin që kemi përgatitur në bllokun e brendshëm JavaScript të vendosur në faqe:

$ (dokumenti). gati (funksioni () (// kodi jQuery këtu për të gjallëruar $ ("# birdImage"). rri pezull (funksioni () ($ (kjo). hiqniClass ("duke fjetur zog"); $ (kjo) .moveClass ("i zemëruar nga zogu"); $ (kjo). hiqniClass ("zog i lumtur"); $ (kjo) .addClass ("zogu-normal");), funksioni () ($ (kjo ) .removeClass ("normal-zogu"); $ (kjo) .removeClass ("i zemëruar nga zogu"); $ (kjo) .removeClass ("zog-i lumtur"); $ (kjo) .addClass ("zog-gjumi ");)); $ (" # birdImage "). mousedown (funksioni () ($ (kjo). heqinClass (" duke fjetur zogj "); $ (kjo). hiqniClass (" zog-normal "); $ ( this) .removeClass ("i zemëruar nga zogu"); $ (ky) .addClass ("i lumtur nga zogu");)). mouseup (funksioni () ($ (ky) .removeClass ("zog i gjumit"); $ (kjo). hiqniClass ("zogu-normal"); $ (kjo). hiqniClass ("zogu-i lumtur"); $ (kjo) .addClass ("zogu i zemëruar");));));

Bërë! Testimi i animacionit

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

Sprites janë një teknologji mjaft interesante dhe e thjeshtë. Tani do t'ju tregoj pak më shumë për këtë.

Çfarë janë CSS sprites?

Me pak fjalë, CSS sprites janë disa imazhe në një skedar. Ekziston vetëm një skedar dhe ka disa imazhe brenda tij. Në të njëjtën kohë, është plotësisht e padukshme për vizitorin. Kushdo që shikon sitin mendon se sheh disa fotografi të ndara.

Pse është e nevojshme kjo? Sprites zvogëlojnë numrin e kërkesave për faqe nga përdoruesi dhe zvogëlojnë madhësinë e përgjithshme të imazheve. Si rezultat, vizitori do ta shohë faqen më shpejt.

Si është bërë? Një fotografi e rregullt rritet në gjerësi dhe lartësi, domethënë, disa imazhe thjesht vendosen krah për krah në një fotografi të rregullt. Atëherë çdo imazh individual nga ky grup zëvendësohet në bllokun e kërkuar me një gjerësi ose lartësi të caktuar në mënyrë që të gjitha pamjet e tjera të mos shihen. I gjithë kompleti është prerë dhe mbetet vetëm një fotografi. Një sprite. Të gjitha fotografitë e tjera mbeten jashtë bllokut specifik.

Për ta bërë më të qartë, unë do të jap një analogji. Imagjinoni duke parë nëpër një vrimë çelësi. Ju shikoni vetëm një pjesë të veçantë të dhomës në anën tjetër të derës. Nëse lëvizni pak anash dhe shikoni në gropë nga një kënd tjetër, do të shihni një pjesë tjetër të së njëjtës dhomë.

Terminologjia

Për të mos u hutuar, le të përcaktojmë menjëherë termat:
I ndezur është një fotografi nga një skedar me disa imazhe.
Komplet sprati është vetë skedari me shumë imazhe.

Karakteristikat e përdorimit të sprites

Kur duhet të përdorni sprites? Në përgjithësi, përgjigjja është një - sprites duhet të përdoren nëse keni shumë imazhe të vogla në faqen tuaj. Nuk ka rëndësi se çfarë lloj imazhesh janë. Nëse keni shumë gradientë me të njëjtën rregullim, shumë butona, shumë ikona, etj. Nëse ka shumë imazhe të vogla në ndonjë faqe të veçantë, atëherë mund të mendoni për përdorimin e sprites.

Si rregull, ka tre lloje fotografish në faqe - jpg, png dhe gif. Të gjitha këto formate kanë dy mënyra shkarkimi - shkarkimi i rregullt dhe progresiv.

Formati jpg mund të jetë i rregullt (themelor) dhe progresiv (progresiv). Në modalitetin normal, fotografia fillon të shfaqet rresht për rresht pasi është e ngarkuar dhe menjëherë me cilësi të mirë. Në modalitetin progresiv, i gjithë imazhi jpg ngarkohet menjëherë, por me cilësi të dobët dhe cilësia rritet ndërsa ngarkohet.

Gif dhe png kanë të njëjtën sjellje. GIF mund të jetë i rregullt ose i ndërthurur. PNG mund të jetë i rregullt ose i ndërthurur. Gif-et dhe png-të e ndërthurura sillen në mënyrë të ngjashme me jpg-në progresive. Kjo sjellje rrit pak madhësinë e skedarit.

Total. Imazhi mund të shfaqet në faqe menjëherë, ose mund të shfaqet me një vonesë. Kjo është e rëndësishme të dini rreth sprites. Shtë e dëshirueshme që spritat të bëhen të ndërthurura ose progresive. Përdoruesi duhet t'i shohë fotografitë sa më shpejt që të jetë e mundur, megjithëse në cilësi të dobët.

Por! Nëse skedari përfundimtar me të gjithë sprites është shumë i madh, atëherë megjithë progresivitetin dhe ndërthurjen, vizitori do të duhet të presë edhe për një shkarkim të pjesshëm të skedarit. Prandaj, nuk rekomandoj të përdorni grupe të mëdha sprite. Nëse skedari është i madh, atëherë e gjithë pika e sprites humbet plotësisht - për të shpejtuar sitin. Me grupe të mëdha sprites, përdoruesit do të duhet të presin aq shumë, nëse jo më shumë, si me imazhe të rregullta të ndara.

Skedarët mbi 30 kilobajt më duken të mëdhenj. Kjo është subjektive. Mund të keni ndonjë ide për madhësinë e skedarit. Një skedar 30 kilobyte do të shkarkohet në rreth 7 sekonda me një shpejtësi interneti prej 56.6 kbps.

Shembuj të përdorimit të sprites

Sprites me ikona

Në një sprite do të kem ikona për:

1. Lista - një ikonë
2. Lidhjet - tre ikona
3. Formularët e kërkimit - Një ikonë

Kjo është, grupi im i parë i sprites do të përmbajë pesë imazhe. Të gjitha fotografitë e mia do të jenë të së njëjtës madhësi - 16 në 16 piksel. Ju mund të bëni imazhe me rezolucione të ndryshme me sprites, nuk është e nevojshme që rezolucioni i të gjitha imazheve të jetë i njëjtë. Në rezolucione të ndryshme të fotografive, bëhet pak më e vështirë të kombinohen këto fotografi në një skedar.

Si rezultat, shembulli i parë do të duket kështu:

Gjeta pesë ikona. Pastaj thjesht i bashkova të gjithë në një skedar. Këtu është skedari me të cilin përfundova:

Tërhiqni vëmendjen tuaj. Në këtë rast, ikonat nuk janë të vendosura nga afër, ka gërvishtje të vogla midis tyre. Si i gjeni këto dhëmbëzime? Sigurisht, mund të llogaritni gjithçka me piksele, por çështja jonë është mjaft e thjeshtë, kështu që këtu është më mirë të zgjidhni këto kufijtë në foto në mënyrë eksperimentale. Së pari, ne bashkojmë imazhet vetëm me sy, pastaj marrim imazhin më të lartë, e vendosim në vendin e duhur. Nëse fotografia është në vendin e vet, por në të njëjtën kohë një pjesë e një imazhi tjetër del nga diku, atëherë dhëmbëzimi duhet të rritet.

Edhe një pikë. Ikona e fundit për listën është shigjeta e gjelbër. Pse është e fundit? Ne nuk na intereson për vendndodhjen e ikonave të mbetura në foto, por çdo send në listë mund të marrë disa rreshta, dhe nëse shigjeta e gjelbër është diku në mes, atëherë fotografitë e tjera do të dalin në rreshtat vijues. Shikoni foton e listës më sipër për të parë se për çfarë po flas.

Kështu që. Gjeta pesë ikona, i bashkova në një skedar. Çfarë të bëjmë më tej? Sigurisht, ne shkruajmë kodin:

• Artikulli i listës
• Një tjetër artikull në listë
• Artikulli i listës
• Një artikull tjetër në listë,
  por në dy rreshta
• Artikulli i listës
• Një tjetër artikull në listë

Ky është kodi html i listës. Tani le të aplikojmë sprite tonë në të:

Ul li (mbushja: 0 0 0 21px; sfondi: url ("sprites.png") 0 -94px pa përsëritje;)

Çfarë kemi bërë këtu? Vendos secilin