Dobar dan, danas želim da vam kažem kako da napravite CSS sprite ikona za vašu veb lokaciju. Da, u drugim stvarima, ne samo ikone, već i bilo koji drugi elementi, na primjer, dugmad, meniji itd. Barem grafiku cijele odredišne stranice.
Članak bi trebao otići u odjeljak, jer korištenje sprite-a ubrzava učitavanje stranice, jer se jedna slika, čak i veće veličine, učitava brže od nekoliko manjih. Ovo se dešava zato što se kreira manje pogodaka na server.
Za one koji nisu upoznati, sprite izgleda ovako:
Odnosno, u odnosu na web, ovo je jedna slika sa mnogo elemenata od kojih je svaki zbog pozicioniranja prikazan na pravom mjestu na stranici.
Ali ću se dotaknuti pitanja koliko se brže ili sporije učitava stranica koja koristi sprijtove u sljedećem članku i sigurno će pasti u pravu kategoriju. Zato se pretplatite na Twitter kako ne bi propustili najavu članka.
I u ovom postu pokušat ću vam pokazati unutrašnje funkcioniranje načina na koji se spriteovi koriste na webu, koristeći primjer ikona mog bloga.
Dakle, napravio sam jednostavnu ikonicu sprite u Photoshopu. Nisam se previše mučio, ali sam napravio po par svake vrste kako bih pokazao ne samo kako se koristi sprite, već i kako se sprite mogu koristiti za kreiranje pseudo-animacije.
Sada morate skicirati html oznake. Ništa neobično. Neuređena lista:
Pretplatite se na ažuriranja
Umjesto "#" unesite adrese vaših računa. Dodajte naslove linkovima. I idemo na dodavanje stilova!
Kreiranje css sprite-a – css markupPostavite stilove kontejnera:
socseti (
širina: 270px;
visina: 150px;
margin:200px auto;
pozadina: url(../images/bg-soc.png) no-repeat;
padding: 15px;
}
Opisujemo stilove za tekst i nenumerisanu listu, koju plutamo lijevo (standardna procedura za menije i slične elemente)
Socseti ul (
overflow: skriveno;
širina: 246px;
margin:20px auto;
}
Socseti ul li (
float: lijevo;
margin-left:2px;
}
Socseti ul li: posljednje dijete (
margin-desno: 2px
}
Sada zabava počinje. Postavimo opšte stilove za linkove:
Socseti ul li a (
displej: blok;
širina: 59px;
visina: 59px;
}
Kao što ste možda primijetili, napravio sam malu grešku prilikom kreiranja sprite-a i stoga sam završio sa idiotskom veličinom od 59x59 px - ali to nije utjecalo na vizualnu percepciju. Nastavimo...
Postavimo pozadinu za prvi link.
a. twitter (
prijelaz: .3s;
}
a. twitter:hover(
prijelaz: .3s;
}
Da bi se željeni sprite element mogao prikazati, on mora biti pozicioniran. Da biste to učinili, nakon što je pozadina veze postavljena, potrebno je postaviti koordinate.
Na primjer, možda ste primijetili da je na spriteu prvi element ikona društvene mreže „VKontakte“, a prva ikona u društvenom meniju je. ikone - “Twitter”. Odnosno, ako su moje ikone široke 59px, onda moram da premjestim pozadinu na -59px. Takođe, želim da se boja promijeni iz sive u obojenu. Da bih to uradio, moram da smanjim pozadinu za 59px. Što je ovdje prikazano:
a. twitter (
pozadina: url(../images/css-sprite-iconok2.png) -59px -59px bez ponavljanja;
prijelaz: .3s;
}
Da bi se stilovi klase mijenjali pri lebdenju, potrebno je postaviti pseudo-klasu lebdenja. Šta radim ovdje:
a. twitter:hover(
pozadina: url(../images/css-sprite-iconok2.png) -59px 0 bez ponavljanja;
prijelaz: .3s;
}
A da bi slika promijenila poziciju, promijenio sam koordinate prikaza.
Svojstvo prijelaza se koristi za postavljanje brzine promjene položaja. Postavio sam ga na 0,3 sekunde.
Na sličan način, potrebno je postaviti poziciju za preostale elemente sprite-a, pomjerajući ga za 118 px da bi se prikazala RSS ikona, i vratite ga na 0 px da bi se prikazala ikona “VK”.
Nadam se da vam je članak bio koristan, a sada ćete koristiti css sprite za svoje web stranice. Sutra ću pokušati analizirati koliko se brže učitava stranica pri korištenju ove tehnologije.
Prije otprilike nedelju dana, jedan od mojih pretplatnika me zamolio da pričam o CSS sprijtovima, šta su oni uopšteno i za šta se koriste. Stoga sam danas odlučio napisati ovaj članak u kojem ću vam reći šta su CSS sprijtovi i gdje se koriste.
CSS sprite je kombinovana slika koja sadrži mnogo različitih slika, a pomoću svojstva background-position postavljamo željenu sliku na pravo mjesto. Recimo da imamo dugme, a ovo dugme menja svoj izgled kada pređete kursorom miša preko njega. Možete napraviti, na primjer, 2 slike, a zatim zamijeniti jednu ili drugu sliku kao pozadinu gumba. Ali nedostatak ove metode je očigledan: 2 puta više datoteka, otprilike 2 puta veća veličina, dakle, 2 puta duže vrijeme učitavanja od 1 slike. A tehnika CSS sprite-a vam omogućava da kreirate samo jednu sliku, koja će imati 2 pozadine dugmeta odjednom.
Da bude jasnije, hajde da rešimo ovaj problem. Imamo sliku, recimo, visoku 20 piksela i široku 100 piksela. Dugme je široko 50 piksela i visoko 20 piksela. Na jednu sliku postavljamo slike oba stanja (jedno za drugim). HTML kod će biti ovakav:
Dugme
I CSS kod:
A (
background: url("button.jpg") bez ponavljanja lijevo gore; // Pozadina dugmeta
displej: blok; // Neka bude blok element
visina: 20px; // Visina dugmeta
širina: 50px; // Širina dugmeta
tekst-dekoracija: nema; // Ukloni podcrtano
}
a:hover (
background-position: desno gore; // Promijenite poziciju pozadine tako da je slika pomaknuta
}
Na ovaj pametan način možete pohraniti mnogo slika u jednu sliku. Naglašavam da je u pitanju mnogo slika, a ne samo 2. Ponekad se skoro cijela stranica sastoji od jedne slike, koja sadrži sve slike koje se koriste. Mislim da ovo nije baš dobro, ali imaće minimalan broj slikovnih datoteka i minimalnu veličinu učitavanja stranice, što je uvijek dobro.
Sviđa mi se:
27
Ne sviđa mi se: 4
Nije dostupan prijevod.
sprite
prije ili poslije "prije" "poslije" "poslije"
angry_bird angry.png. index.html
Nije dostupan prijevod.
CSS sprijtovi su grafike za vašu web stranicu, kombinovane u jednu grafičku datoteku. "Zašto jedan fajl?" - pitate. Činjenica je da vam ovakav pristup čuvanju slika omogućava da poboljšate performanse web stranica, kao i da pohranite grafičke slike na organizovaniji način. Pogledajmo neke od najboljih praksi za korištenje sprite-ova. Sam naziv sprite-a može vas podsjetiti na igre sprite-a, retro igraće konzole, pa čak i igre pretraživača koje su danas tako popularne:
Dakle, primjenjiv na web dizajn, sprite je samo jedna velika datoteka koja sadrži nekoliko slika za vašu web stranicu, čime se štedi vrijeme na preuzimanju i prijenosu datoteke preko mreže. Kada, na primjer, sprite sadrži 20-30 slika, to može značajno olakšati opterećenje servera, jer ako bi ove slike bile odvojeno pohranjene, server bi morao napraviti 20-30 zasebnih zahtjeva da dobije svaku takvu sliku. Zahvaljujući sprite-u, serveru se šalje samo jedan HTTP zahtjev - za primanje jedne slike. Sprajt možda neće biti vizuelno „čitljiv“ oku, jer je njegov glavni zadatak samo da sastavi različite „delove“ vašeg dizajna zajedno. Na primjer, sprite bi mogao izgledati ovako:
Sprijtovi koriste većina modernih stranica, a poznati VKontakte nije izuzetak. Na primjer, ovako pohranjuje "komadiće" sučelja u jednu datoteku - naime, poznate ikone:
Sjajna stvar u vezi sa korištenjem CSS sprite-ova je to što serveru trebate poslati samo jednu grafičku datoteku koja sadrži sve vaše slike, umjesto mnogo pojedinačnih slika - a putem CSS-a možete prikazati bilo koji mali segment te grafičke datoteke kao pozadinu za element. Neki ljudi misle da se pojedinačne slike brže učitavaju, ali to nije istina. Prilikom postavljanja jednog grafičkog fajla sa više slika šaljemo samo jedan zahtjev serveru, a pri postavljanju većeg broja slika šaljemo više zahtjeva serveru. Kombinovanje slika u jednu datoteku ne samo da značajno smanjuje broj HTTP zahtjeva, već i smanjuje ukupnu veličinu datoteke slike.
Dozvolite mi da vam dam još jedan primjer duha. Ovako jedna poznata zapadnjačka web stranica posvećena dizajnu pohranjuje grafičke elemente:
Možete se pitati - kada je najbolje vrijeme za pripremu spritea? Za to postoje dva različita pristupa.
Različiti pristupi - kreiranje sprite-a prije i nakon kreiranja stranicePostoje dva uobičajena pristupa prilikom kreiranja lista za sprite – napravite ga prije ili nakon kreiranja vaše web stranice. Možete smjestiti sve slike u sprite list prije kreiranja stranice. To je ono što nazivamo pristupom "prije". Osim toga, možete kreirati sve slike kao zasebne datoteke, što olakšava njihovo uređivanje. Nakon što je web stranica napravljena i sve slike pripremljene, možete brzo i jednostavno kreirati sprite list, bilo ručno ili koristeći jedan od nekoliko alata. Ovo ćemo nazvati pristupom „poslije“. Ako su vam sprite listovi novi ili ste novi u web dizajnu, tada će vam pristup biti prikladniji. Postoji mnogo uslužnih programa, usluga i programa koji će vam pomoći da kreirate sprijtove, od kojih se većina distribuira i dostupna je besplatno.
Organizirano slaganje slika u sprite-uPrilikom kreiranja sprite-a u Photoshopu, preporučljivo je odmah postaviti sve slike na organiziran način i u određenom redoslijedu koji odaberete, kako bi kasnije rad s njima bio lak i jednostavan. Pokušajte uvijek zaokružiti prostor za svaku sliku sprite-a na najbližih 10 piksela ili ostavite više prostora oko njih ako su sve iste veličine. Kada je u pitanju pisanje CSS stila, nećete morati da zapisujete merenja koordinata i manje je verovatno da ćete zaboraviti koordinate za slike koje želite. Evo primjera uspješnog postavljanja različitih slika u jedan sprite:
Dakle, upoznali smo se s konceptom sprite-a u web dizajnu, ali teorija bez prakse nije ništa. Stoga ćemo sada kreirati naš prvi sprite i naučiti kako napraviti jednostavnu animaciju na HTML stranici. Naš primjer će se temeljiti na liku iz igre Angry Birds - ovo je smiješna crvena ptica. Prvo, pripremimo sprite sliku u .PNG formatu koja sadrži 4 faze animacije ptica:
Kreirajmo direktorij angry_bird negdje na disku - tamo ćemo smjestiti naše primjere datoteka. Spremamo sprite sa pticama u ovaj direktorij i zovemo datoteku angry.png. Sljedeći korak je kreiranje datoteke u istom direktoriju pod nazivom index.html - ovo će biti naša probna stranica sa animacijom. Zatim otvorite ovu datoteku u uređivaču i tamo postavite sljedeći kod:
Lekcija o web stranici - Demonstracija rada sa spriteovima $(document).ready(function() ( // ovdje će biti jQuery kod koji kreira animaciju));
Dozvolite mi da objasnim malo šta smo sada uradili. Prvo, naš HTML dokument postavljamo na UTF-8 kodiranje, što znači da moramo sačuvati naš index.html u tom kodiranju. Također možete postaviti još jedan, na primjer, windows-1251 - za naš zadatak to nije važno. Zatim smo povezali style.css fajl sa dokumentom (još nije u našem direktorijumu angry_bird, kreiraćemo ga malo kasnije). Također smo postavili link na eksternu skriptu i povezali jQuery biblioteku - koristeći jQuery ćemo dinamički mijenjati slike naše ptice i mijenjati njene “faze” iz sprite-a. Pripremili smo i interni JavaScript blok u koji ćemo potom postaviti kod koji animira pticu. I konačno, glavno tijelo dokumenta sadrži jednu hipervezu, unutar koje je DIV blok, a njegov ID je postavljen na birdImage, a zadana klasa je bird-sleeping. To znači da će naša ptica “spavati” kada otvori stranicu – to odgovara donjoj lijevoj slici unutar spritea – gdje su joj oči zatvorene. Sada je vrijeme da “isečemo” naš sprite, tj. odaberite pojedinačne slike iz njega.
Rezanje sprite-a pomoću usluge SpriteCow.ComZadatak "rezanja" sprite-a je prilično naporan - zahtijeva pažnju kako ne biste pogriješili s koordinatama koje definiraju svaku sliku u sprite-u. Na sreću, danas postoje servisi koji u potpunosti otklanjaju ovu glavobolju dizajneru i dizajneru izgleda. Koristim uslugu http://spritecow.com za rezanje i preporučujem vam je. Suština usluge je jednostavna i vrlo zgodna - odabiremo svaku sliku ptice mišem, a SpriteCow nam daje gotov CSS kod s koordinatama. Sve što trebamo učiniti je jednostavno postaviti 4 stila za svaku fazu ptice! Nakon ulaska na stranicu, vidimo 2 dugmeta - „Otvori sliku“ i „Prikaži primjer“. Treba nam prvo dugme, kliknite na njega:
U dijalogu koji se otvori izaberite našu datoteku sprite-a angry.png, nakon čega ćemo vidjeti kako je naš sprite učitan na stranicu. Zatim moramo odrediti boju pozadine, da bismo to učinili, kliknite na alatnu traku "Izaberi pozadinu" i pokažite na bijelo područje našeg spritea - to će nam omogućiti da ispravno izrežemo svaku fazu ptice:
Odaberite prvu sliku i automatski preuzmite CSS kod za nju:
Sada je vrijeme da kreirate style.css datoteku u našem direktoriju angry_bird. Tamo sekvencijalno ubacujemo 4 generirana dijela CSS koda, ali umjesto standardne klase .sprite koju nam nudi SpriteCow, nazovimo naše stilove jasnije. Također, pošto sprite sliku pohranjujemo direktno u korijenu direktorija, uklonit ćemo nepotreban element putanje - imgs/ iz pozadinskog svojstva. dobio sam ovako:
/* "obična" ptica. Gornja lijeva slika u sprite-u */ .bird-normal ( background: url("angry.png") no-repeat -12px -16px; širina: 97px; visina: 94px; ) /* "Sretna" ptica. Gornja desna slika u sprite-u */ .bird-happy ( background: url("angry.png") no-repeat -118px -17px; širina: 97px; visina: 94px; ) /* "Spava" ptica. Donja leva slika u sprite-u */ .bird-sleeping ( background: url("angry.png") no-repeat -12px -120px; širina: 97px; visina: 94px; ) /* "Ljuta" ptica. Donja desna slika u spriteu */ .bird-angry (pozadina: url("angry.png") bez ponavljanja -118px -120px; širina: 97px; visina: 94px; )
Poslednji korak je pisanje jQuery koda koji kreira animaciju.
Sada kada smo uspješno isjekli sprite i postavili 4 stila za svaku sliku u našu style.css datoteku, sve što treba da uradimo je da napišemo neki jQuery kod koji će dodati animaciju kada se naša hiperveza pređe preko i kada link je kliknut. Kao što se sjećamo, po defaultu imamo klasu bird-sleeping, tj. naša crvena ptica će "zaspati" kada otvori dokument :)
Sva animacija će biti bazirana na 3 jQuery metode:
- hover - rukovalac za prelazak kursora preko veze i za pomicanje kursora od veze. Kada zadržite kursor, ptica će se „probuditi“ – tj. razred će postati ptičji normalan
- mousedown - rukovalac za klik lijevom tipkom miša na vezu. U ovom slučaju, ptica će postati "sretna" - tj. DIV bloku će biti dodijeljena klasa bird-happy
- mouseup - rukovalac otpuštanja lijevog gumba miša. Kada se pusti, ptica će se "naljutiti" - tj. DIV bloku je dodijeljena klasa bird-angry
Dakle, zalijepimo sljedeći kod na mjesto koje smo pripremili u internom JavaScript bloku postavljenom na stranici:
$(document).ready(function() ( // evo jQuery koda koji kreira animaciju $("#birdImage").hover(function() ( $(this).removeClass("bird-sleeping"); $ (this).removeClass("ptica-bijesna"); $(this).removeClass("ptica-srećna"); $(this).addClass("bird-normal"); ), function() ( $( this ).removeClass("bird-normal"); $(this).removeClass("bird-besny"); $(this).removeClass("bird-happy"); $(this).addClass("bird- spava "); )); $("#birdImage").mousedown(function() ( $(this).removeClass("bird-sleeping"); $(this).removeClass("bird-normal"); $ ( this).removeClass("ptica-ljuta"); $(this).addClass("ptica-srećna"); )).mouseup(function() ( $(this).removeClass("ptica-spava"); $ (this).removeClass("bird-normal"); $(this).removeClass("bird-happy"); $(this).addClass("bird-angry"); )); ));
Spremni! Testiranje animacije
OK, sada je sve gotovo! Naša ptica je spremna i oživjela je stranicu svojom animacijom! :) Možete pogledati demo. Preuzmite arhivu s primjerom na dnu članka.
Računarska industrija je porasla veoma, veoma visoko poslednjih godina. Ako su ranije kompjuterske igre bile samo zabava za uski krug obožavatelja, sada su nešto više. Mogu ih igrati ljudi svih uzrasta, a kreiraju se projekti koji odgovaraju i najfinijim ukusima. I što je najvažnije, pojavile su se neverovatne mogućnosti koje su ranije bile nezamislive, pa se sada kompjuterske igrice mogu praktično ne razlikovati od stvarnosti u smislu grafike i fizike, mogu da urone korisnika u nepoznate svetove, omogućavajući mu da živi neverovatne priče i bude ključ za njihov karakter. Ali u isto vrijeme, neki ljudi ne žele biti ograničeni na proces "igranja" - fascinirani su postupkom kreiranja igara. Međutim, većina ovih sanjara ostaje na nivou fantazije, jer smatraju da je ovaj proces previše kompliciran. U stvarnosti, to nije slučaj, o čemu svjedoči ogroman broj indie programera koji sada proizvode mnoge projekte bez velikih budžeta ili podrške izdavača. Samo trebate početi s malim i postepeno ići naprijed. U ovom članku ćete naučiti šta su sprijtovi igara i kako ih koristiti, kako biste mogli početi kreirati vlastite projekte.
Šta su sprite?Ako imate kompjutersku igricu na monitoru, šta vidite ispred sebe? Grafička ljuska ovog projekta, razne teksture sastavljene od sićušnih piksela. Ako planirate da kreirate kompjutersku igru, onda ćete morati mnogo da radite sa grafikom. Ali ako još ne ciljate na veliki projekat, onda se od vas ne traži da savršeno radite s 3D grafičkim uređivačima. Ovdje će vam pomoći spriteovi za igre koje možete preuzeti na internetu. Ali šta je to? Kako se mogu koristiti i kako će vam olakšati zadatak? Sprajtovi igre su gotove teksture likova, objekata itd. koje možete preuzeti na svoj računar i zatim koristiti u procesu kreiranja igre. To znači da nećete morati crtati svaki predmet u igri, kao ni svaku fazu njegovog kretanja - već ćete sve to imati spremno. Kao što vidite, sprijtovi igara zaista mogu učiniti vaš život mnogo lakšim.
Sprite pogled
Sada imate opću predstavu o tome što su sprijtovi igre, ali to neće biti dovoljno da ih koristite u praksi. Moramo shvatiti šta su to tačno i kako ih primijeniti u kreiranju igara. Ako ćete koristiti sprijtove, morate ih preuzeti na svoj računar. U većini slučajeva izgledat će kao velika ili čak ogromna grafička datoteka sa desetinama ili čak stotinama malih slika na prozirnoj pozadini. Shodno tome, možete izrezati ovu veliku datoteku na male kako biste imali direktan pristup svojim sprijtovima. Možda vam neke od njih neće trebati i možete ih izrezati, tako da je ova metoda mnogo praktičnija od preuzimanja desetina ili stotina pojedinačnih slika. Jednostavno odaberete veliku datoteku, označite područje i imate sprite.
Korištenje Sprites-a
Kao što dobro znate, u većini slučajeva moći ćete pronaći spriteove za 2D igre, jer 3D slike nisu toliko standardizirane, pa će biti potrebno puno prostora da se prenesu svi pokreti jednog 3D objekta. Istovremeno, rad sa 2D sprijtovima je izuzetno jednostavan. Jednostavno učitavate sprite u uređivač u kojem kreirate i spajate ih zajedno kako biste stvorili efekte pokreta. A zatim ga učitajte u nivo i uživajte u rezultatu.
Prijelaz sa sprite-a na grafikuNećete moći provesti cijeli život koristeći spriteove za pravljenje igara, pa ako ste ambiciozni, morat ćete ili naučiti kako ih koristiti ili pronaći nekoga da vam pomogne u ovoj vještini.
Postoji mnogo metoda za optimizaciju web stranica. Neki od njih rade, neki ne. Međutim, postoje neke metode koje su obavezne za bilo koju web stranicu ili blog. Htio sam razgovarati s tobom o jednom od njih.
Jedna od glavnih metoda za optimizaciju web stranica. Stoga ćemo danas govoriti o tome kako kombinirati sprijtove slika na web stranici u CSS-u, čime ćemo povećati njihovu brzinu učitavanja.
Malo istorijeU dalekoj, dalekoj prošlosti, kada su modemi pištali u stanovima, a brzine veze nisu prelazile 5 Kbps, ljudi su razmišljali o teškom zadatku kako da se sajtovi brže učitavaju bez plaćanja previsokih suma za dolazni saobraćaj. Razmišljali su, odnosno razmišljali, i došli su na ideju da komponuju slike koje se koriste na stranici u duhove.
I odlazimo...
Kombinovanje slika u spriteI tako, kao što smo ranije saznali, sprite je nekoliko slika raspoređenih u jednu na prozirnoj pozadini, kojoj se pristupa pomoću CSS svojstava background-position. Ali nemojte to brkati sa kolažom. Sprite ≠ kolaž.
Da biste dobili sprite, potrebno je da sve tipke, ikone, metke i ostalo sranje što je moguće kompaktnije smjestite u jednu PNG datoteku. Ne zaboravite, pozadina mora biti prozirna. Pogledajmo sada na primjeru.
Recimo da imamo PSD fajl sa tako lepim dugmetom u 3 stanja.
Šta radi prosječan samouki layout bloger? Izrezuje dugme u svakom stanju i sprema ga u zasebne datoteke. Odnosno, jedno dugme uzima 3 slike ovog finog čoveka. A ako ste pod stresom, zapamtite da je svaka slika na stranici dodatni HTTP zahtjev koji učitava server i vaš blog radi sve sporije i sporije i sporije i sporije i sporije i sporije...
Da se to ne bi dogodilo, mnogo je logičnije sačuvati dugme u jednom . Da bismo to učinili, otvaramo istu PSD datoteku, uklanjamo beskorisne strelice, natpise i pozadinu iz nje i poredamo sva stanja gumba što bliže jedno drugom bez preklapanja.
Ovo je ono sa čime smo završili. Ni u kom slučaju dugmad ne bi trebalo da se preklapaju.
Odlično, pripremili smo grafički fajl, a sada ću vam pokazati kako da ga rasporedite.
Raspored SpriteRaspored CSS sprijtova se ne razlikuje od rasporeda običnih slika, sa izuzetkom jednog ALI. Morate znati ne samo tačnu veličinu slike koju želite da prikažete, već i njene koordinate. Na primjer, cijeli naš sprite je širok 330 px i visok 150 px.
Ali trebamo samo prikazati dugme koje je široko 227 px i visoko 41 px, navodeći njegove tačne koordinate. Ako nemate dobar html editor, mogu ja.
Kreirajte fajl index.html i upišite u njega potrebne linije koda, doctype i sve to.
Nakon što su svi standardni koraci završeni, pokušajmo da prikažemo naše dugme.
Nakon oznake tijelo kreirajte kontejner div sa klasom dugme– ovo će biti naše dugme.
| 1 |
Ovdje se naš html završava i sada moramo dodati CSS stilove za dugme.
Kod ispod pokazuje da prvo deklarišemo klasu dugme. Zatim koristeći svojstva visina i širina podesite veličinu našeg dugmeta. Nekretnina pozadini omogućava nam da odaberemo datoteku koju ćemo koristiti kao sprite, i background-position postavite koordinate slike koja nam je potrebna u ovom spriteu. To je jednostavno.
| 1 2 3 4 | .button (visina: 41px; širina: 227px; pozadina: url (img/sprite.png); background-position: 0px -12px ;) |
Pogledajmo izbliza nekretninu background-position.
Kao što možete vidjeti iz koda iznad, ima dva značenja. Prva vrijednost vam omogućava da postavite koordinate slike duž ose X, a druga, dakle, duž ose Y. Naše dugme ne skače nigde duž ose X, jer se sva stanja nalaze jedno ispod drugog. Stoga, da bi se drugo stanje gumba pojavilo pri lebdenju, moramo promijeniti vrijednost odgovornu za Y os.
| 1 2 | .button :hover (položaj pozadine: 0px -56px ; ) .button :aktivan (položaj pozadine: 0px -98px ;) |
Kao što znate, a ako ne, onda da, svako dugme ima nekoliko stanja.
Iskoristili smo ove nekretnine.
Ako ste previše lijeni da ručno pravite sprajtove i općenito se zamarate Photoshopom, pomoći će vam divna besplatna usluga: spritepad.wearekiss.com. Samo bacite potrebne slike u radni prostor i to će vam stvoriti sprite.
U pritvoruCSS sprijtovi su vrlo važan korak u ubrzavanju web stranice. Odnosite se prema njemu s dužnim poštovanjem i pokušajte ga koristiti svuda.
