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 i 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 istorije
U dalekoj, dalekoj prošlosti, kada su modemi pištali po 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 sprite
I 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 dogodi, mnogo je logičnije sačuvajte dugme u jednoj datoteci. 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čku datoteku, a sada ću vam pokazati kako da je rasporedite.
Raspored Sprite
Izgled 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 prikazati, 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 napiš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.
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.
Dugme (visina:41px; širina:227px; background: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.
Button:hover (background-position:0px -56px;) .button:active (background-position:0px -98px;)
Kao što znate, a ako ne, onda da, svako dugme ima nekoliko stanja.
- Normalno – normalno ili normalno stanje
- Hover – stanje dugmeta kada lebdite kursorom
- Aktivno – stanje dugmeta kada se pritisne
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 zaključku
CSS 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.
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 ići u odjeljak za ubrzanje i optimizaciju, jer korištenje sprite-a ubrzava učitavanje stranice zbog činjenice da 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.
Kreiranje css sprite - html oznake
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 markup
Postavite 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.
Sprite je omiljeno piće miliona ljudi, koje ne samo da se može kupiti u svakoj prodavnici, već i samostalno pripremiti. Na internetu možete pronaći mnogo različitih recepata i savjeta kako napraviti sprite jednako dobar kao pravi. Najpopularniji od njih prikupljeni su u ovom članku.
Recept za pravljenje sprite-a je prilično jednostavan. Potrebno je pomiješati sastojke poput limete, limunovog soka, šećera i mineralne vode u pravilnim omjerima. Međutim, postoji nekoliko pravila kojih se morate pridržavati kako bi napitak bio istinski ukusan i sličan prirodnom.
Prvo što je važno je da za kuvanje koristite isključivo sveže voće, a ne da uzimate ono koje je „šteto baciti“, ali se više ne može jesti. Pokvaren proizvod može pokvariti okus cijelog jela, isto vrijedi i za piće.
Osim toga, važno je koristiti mineralnu vodu visokog kvaliteta. Na ovom sastojku ne treba štedjeti, jer on igra ključnu ulogu u pripremi napitka. Voda mora biti jako gazirana, slaba ili negazirana mineralna voda nije prikladna za takve svrhe.
Umjesto šećera, preporučuje se dodavanje šećernog sirupa u domaća pića poput Sprite, mojito i drugih koktela. U nastavku je opisan detaljan recept za pravljenje sirupa.
Kako pripremiti šećerni sirup?
Šećerni sirup je neophodan kako bi domaći koktel bio što bliži onom iz prodavnice. Sami napraviti ovaj sirup je prilično jednostavno i neće vam trebati previše vremena.
Prije svega, trebate staviti posudu na vatru i pričekati dok se voda ne zagrije. Vatra ne smije biti jaka, ali ni slaba, inače će se šećeru trebati jako dugo da se otopi. Postepeno, potrebnu količinu šećera morate sipati u šerpu, dovesti vodu do ključanja i ostaviti da se šećer potpuno otopi.
Ohladite dobijenu tečnost. Šećerni sirup je spreman - i sada se može koristiti za pravljenje ukusnih koktela.
Sprite za 10 minuta
Za izradu ove popularne sode ne treba puno vremena - zadatak možete završiti za manje od 10 minuta. Jedan od najčešćih recepata za pravljenje sprite kod kuće je sljedeći:
- Sitno nasjeckajte jedan limun, bacite koricu;
- u tiganj dodati limun, posut sa 5 kašika šećera, kuvati pet minuta;
- pustite da se dobijena tečnost kuva oko sat vremena;
- procijediti i dodati bilo kojoj visoko gaziranoj vodi.
Rezultat je divno piće, potpuno identično kupljenom Spriteu. A za pripremu će biti potrebno samo deset minuta, ne računajući vrijeme tokom kojeg tečnost treba da se ulije.
Napredan način da napravite kućni duh
Osim standardnih recepata za pravljenje kokete od limuna i gazirane vode, možete pronaći još zanimljivije načine da napravite piće od drugih sastojaka. Za pripremu spritea trebat će vam:
- obična voda;
- "Sprite" aroma;
- limunska kiselina;
- ugljični dioksid.
Što se tiče posljednjeg „sastojka“, nemaju ga svi. Ugljen dioksid se koristi u fabrikama i fabrikama za masovnu pripremu gaziranih pića. Međutim, mnogi eksperimentalni kuhari također imaju ovaj element među svojim kuhinjskim potrepštinama.
Domaća pića na bazi Sprite-a
Sprite je posebno popularan jer je osnova za pripremu mnogih poznatih alkoholnih i bezalkoholnih koktela koji se služe u noćnim klubovima i barovima. Jedan od njih je i mojito napitak. Ovaj koktel je posebno aktuelan ljeti, jer ne samo da gasi žeđ, već i savršeno tonizira tijelo.
Tradicionalni mojito sadrži nekoliko sastojaka. U pravilu je to gazirana voda, sok od mente i šećer. Kada je u pitanju alkoholni koktel, ovoj listi se dodaje i bijeli rum.
Mojito
Članak nudi nekoliko recepata kako napraviti sprite kod kuće, ali uz mojito je to još lakše! Ovaj koktel se jednostavno čini komplikovanim.
Obično su sljedeći sastojci potrebni za pravljenje vlastitog koktela:
- šećer od trske;
- soda;
- limetu ili limun;
- menta;
- rum (barem votka);
- kocke leda.
Sprite je savršen kao sok, možete ga napraviti i sami. Ako se pitate kako napraviti sprite kod kuće, recept i detaljan opis korak po korak možete pronaći iznad.
Morate "sakupiti" mojito na ovaj način:
- limetu prepolovite, iz jedne polovine iscijedite sok;
- sitno nasjeckajte mentu, dodajte u čašu s limetom;
- napunite čašu kockicama leda;
- Preostali prostor u čaši napunite sodom;
- dodajte 30 ml bijelog ruma.
Mojito treba poslužiti odmah nakon pripreme kako led u čaši ne bi imao vremena da se otopi. Preporučuje se piti iz slamke. Čak i djeca mogu napraviti bezalkoholni mojito.
Malina limunada
Ovo je još jedan popularan bezalkoholni koktel koji toliko voli mnoga djeca, jer su glavni sastojci u njemu slatke, sočne maline, a ne manje ukusan je i Sprite. Već znate kako napraviti sprite, recept sa fotografijama i metode kuhanja kod kuće opisani su gore.
Za koktel malina limunada trebaće vam:
- malina;
- sirup od maline;
- limun;
- sprite;
- menta;
- kreč.
Prvi korak je da pripremite maline - tri zrele bobice dobro izgnječite u čaši. Nakon toga treba dodati krišku limuna i čašu do vrha napuniti kockicama leda. Preostali prostor u čaši će biti popunjen aromatičnim domaćim spriteom. Za dekoraciju koristite limetu, limun i mentu.
Narandžasta limunada
Još jedna dječija poslastica je limunada od narandže, koja se može pripremiti i kod kuće. Ovo osvježavajuće, okrepljujuće piće ni na koji način nije inferiorno od gaziranih pića iz trgovine. Naprotiv, ispada još ukusnije ako ga pravilno skuhate.
Da biste sami napravili limunadu od narandže trebat će vam sljedeći proizvodi:
- 3 srednje narandže;
- 2 limuna;
- mljeveni korijen đumbira (kafena kašičica);
- 150 grama šećera;
- 1 litar sprite-a;
- 1,5 litara obične vode.
Prvo morate pripremiti šećerni sirup, jer će se to koristiti u receptu. Ogulite pomorandže, sitno nasjeckajte, limun prepolovite. U šerpu stavite pola limuna i pomorandže, dodajte vodu i dodajte korijen đumbira.
Dobijenu tečnost dobro procijedite. Napunite bokal do pola kockama leda, sipajte vodu sa citrusima, šećerni sirup i Sprite. Radiće i obična mineralna voda. Preostalu polovinu limuna narežite na kriške i dodajte u dobijeni napitak.
Korištenje CSS sprijtova na web stranici omogućava vam da poboljšate performanse i inteligentno organizirate elemente interfejsa.
Sprite Sheet je jedna velika slika malih grafičkih elemenata web stranice, kao što su ikone ili dugmad. A zahvaljujući CSS-u, svaki element možete prikazati zasebno.
Primjena u praksi
Glavna prednost upotrebe sprite-a je da server učitava sve elemente u jednom fajlu odjednom. Neki mogu misliti da učitavanje malih, lakih slika može povećati performanse stranice, ali to nije slučaj - u slučaju pojedinačnih slika, broj HTTP zahtjeva se povećava. Također, korištenje jednog sprite-a vam omogućava da smanjite težinu grafike. Primjer sprite-a na web-stranici webdesign tuts:Primjer koda za korištenje sprite-ova na stranici (demo):
Spriteovi se također često koriste za kreiranje jednostavnog efekta lebdenja preko pretraživača (demonstracija):
Prije ili poslije?
Postoje dva pristupa pripremi sprite-ova: prije i nakon izrade web stranice. U prvom slučaju, sve male slike interfejsa se kompajliraju u jednu datoteku u završnoj fazi kreiranja web stranice. U ovom slučaju, prikladno je uređivati pojedinačne slike, kao i koristiti ih zasebno, ako je potrebno. Ova metoda je prikladnija za web dizajnere početnike.Iskusniji programeri pripremaju sprite u početnoj fazi, to im omogućava da bolje organiziraju grafiku budućeg dizajna, kao i da pripreme PSD predložak za izgled.
Organiziranje elemenata dizajna
Kada pripremate datoteku sa sprite-ovima, vrijedi što je moguće više zgusnuti slike, a ako su iste veličine (na primjer, ikone), kreirajte mrežu koja će olakšati korištenje sprite-ova na stranici:Datoteku treba pripremiti na način da buduće izmjene u njoj ne utiču na raspored postojećih elemenata, inače ćete morati urediti cijeli CSS. PSD datoteka sa spriteovima mora biti dobro označena: potrebno je jasno imenovati sve slojeve i grupe, a također pokušati ne spajati slojeve koji se mogu promijeniti u budućnosti.
Korisni alati
- odličan okvir koji može kreirati spriteove iz mape sa slikama. Također koristi Sass.Alat koji vam omogućava da kreirate sprite datoteke jednostavnim dodavanjem linije koda u Sass datoteke.
Obeleživač koji može da generiše i pregleda sprijtove koji se koriste na sajtu.
Ovako izgleda radni sloj bookmarkleta.
Zdravo dragi prijatelji. Danas ćemo nastaviti optimizirati slike na našim stranicama kako bismo ubrzali brzinu učitavanja. Kao što se sjećate iz , naučili smo kako optimizirati bilo koju sliku za web lokaciju, pojedinačno i grupno.
A danas je naša tema također posvećena optimizaciji slike, ali mnogo složenije nego prošli put. Naime, danas ću vam reći i pokazati kako da kreirate CSS sprijtove da biste ubrzali učitavanje web stranice. Upravo ova tehnologija može značajno povećati brzinu učitavanja stranice.
Šta su CSS sprite?
Općenito, sprite tehnologiju su prvi izmislili animatori u Disneyju. Nakon toga se ova tehnologija počela aktivno koristiti u kompjuterskim igrama i, konačno, u web dizajnu.
U animacijama i kompjuterskim igrama, sprite tehnologija vam omogućava da preklapate likove i kontrolišete njihove radnje u pozadini gotove scene.
U web dizajnu, spriteovi vam omogućavaju da kontrolišete slike i vizuelne efekte. Primjer: na mojoj web stranici. U početku vidite jednu sliku, ali kada pomerite kursor miša preko rakete, vidite drugu sliku. Ali u stvarnosti to je jedna slika.
Ovo je cela poenta CSS sprijtova.
Zašto koristiti CSS sprite
Pa, naravno, da ubrzate brzinu učitavanja stranice. Uzmimo moj blog kao primjer. Ako bolje pogledate, na mom blogu ima mnogo elemenata dizajna koji su predstavljeni kao zasebni fajlovi (slike).
Elementi dizajna koji se mogu zamijeniti spriteom
Ukupno ima 19 zasebnih slika. Svi su optimizirani i imaju vrlo malu težinu. I to je jako dobro. Ali sam broj slika stvara 19 HTTP zahtjeva serveru. I svi ovi zahtjevi-odgovori usporavaju učitavanje stranice. Ili možete zamijeniti ovih 19 slika jednom ili dvije.
Tako se smanjuje volumen preuzete slike i broj zahtjeva prema serveru. Zbog toga se povećava brzina učitavanja stranice.
Koje slike treba kombinovati u CSS sprijtove?
Nema potrebe da mislite da apsolutno sve slike treba kombinovati. Ovo uopšte nije neophodno. Kako biste saznali koje slike treba kombinirati, savjetujem vam da koristite već poznatu uslugu GTmetrix.
Ovdje također možete vidjeti preporuke za kreiranje sprite-ova. Ili bolje rečeno, preporuka CSS generatora sprite-a SpriteMe . Pomoću ovog generatora možete lako kreirati spriteove koji su vam potrebni. Ali to mi nije pomoglo, pa sam sve morao sam.
Kako kreirati CSS sprite
Sada ću pokušati figurativno objasniti kako to funkcionira. Dakle, zamislite - cijeli predložak web stranice je čvrst okvir s mnogo ćelija za umetanje grafičkih elemenata. A iza ovog okvira je čvrsta slika sa mnogo elemenata grafičkog dizajna. A ova slika se kontrolira pomoću CSS stilova. Odnosno, pomoću CSS stilova možete umetnuti željeni fragment slike u bilo koji prozor okvira. Nadam se da sam to jasno objasnio. Pa počnimo.
Nakon što vas usluga GTmetrix zatraži ili odlučite koje datoteke treba kombinirati u spriteove, trebali biste početi kreirati sprite (prazno).
Dakle, analiziram sajt u GTmetrix servisu i, jednu po jednu, spremam predložene slike u poseban folder na svom računaru.
Sačuvajte slike u poseban folder
Od ovih pojedinačnih slika stvorit ćemo sprite.
Kreirajte novu sliku sa prozirnom pozadinom. Odaberite veličinu koja odgovara svim slikama. Pa, na primjer, ako su sve vaše slike 32x32 i 16x16 piksela i postoji jedna 380x150, onda napravite svoju sliku tako da stane sve ove slike u jednu.
I obavezno napravite prozirnu pozadinu.
Ali čak i ako ste pogriješili s veličinom, uvijek je možete ispraviti putem stavke menija "Slika" - "Veličina slike".
Sada, jednu po jednu, prikažite sve slike koje ste prethodno pripremili.
Stavka menija "File" > "otvorena slika". Slika će se otvoriti, odaberite je CTRL+A i kopirajte je u međuspremnik CTRL+C. Idite na šablon i zalijepite sliku CTRL+V. I tako sa svim slikama.
Trebalo bi izgledati otprilike ovako.
Sada biste trebali odrezati sav višak. Da biste to učinili, koristite alat "rezanje".
Kada je šablon spreman, sačuvajte ga u PNG formatu i pola posla je gotovo. Stavka menija "File" > "Sačuvaj". Ne zaboravite na format.
Sada sliku treba učitati na hosting u folder sa slikama teme:
http://yourdomain/wp-content/themes/vahatema/images/
Imajte na umu da mogu postojati razlike u nazivu foldera za pohranjivanje slika tema.
Upload fajla na hosting se može obaviti preko hosting fajl menadžera, u mom slučaju to je . Ili putem . Na vama je.
Sada dolazi teži dio, trebate zamijeniti predloške slike sa sprite-om. Kao primjer, uzmimo zaglavlja blokova na traci web mjesta na mom blogu i ispitamo kod elementa. Da biste to učinili, desnom tipkom miša kliknite željeni element i odaberite stavku u kontekstualnom izborniku "Pogledaj kod elementa"(za Chrome) ili "Ispitaj element"(za Firefox). Prilično je isto i za druge pretraživače.
Ispitivanje elementa u šablonu
Ovdje možete vidjeti HTML kod i CSS stilove. To jest, vidite datoteku odgovornu za ispis stilova i broj reda gdje treba tražiti klasu odgovornu za ovaj fragment. Iz snimka ekrana je jasno da se klasa bočne trake i posebno zaglavlje h2 nalaze u datoteci style.css na liniji 339. Ovdje morate izvršiti sve potrebne promjene stila.
Ali već ovdje u prozoru za istraživanje elemenata možete eksperimentirati sa stilovima i odabrati onaj koji vam je potreban. Zatim samo trebate prenijeti ove stilove u datoteku style.css.
Prije nego što nastavite s ovim korakom, toplo preporučujem da napravite sigurnosnu kopiju vašeg style.css datoteke.
Sada je vaš zadatak da otvorite datoteku style.css i izvršite potrebne promjene. To možete učiniti koristeći Notepad++ (veoma zgodan uređivač i prikazuje broj reda) ili putem uređivača u WordPress admin panelu.
Dakle, otvorite WP administrativni panel – "izgled" > "Urednik" > "style.css". Pošto ovdje nema numeracije redova, potrebno je potražiti željeno mjesto pomoću CTRL + F za pretragu i upisati željenu CSS klasu (u mom slučaju - bočna traka h2).
Izmjena koda style.css
Potrebno je samo promijeniti naziv slikovne datoteke i unijeti parametre položaja u odnosu na koordinatnu osu. Ako vaš nije kao moj na snimku ekrana, onda biste trebali shvatiti da je parametar odgovoran za prikaz slike (pozadine): background: url('images/spriteme.png');
A parametar odgovoran za poziciju slike je: background-position: -0px -0px; sa negativnim vrijednostima. Prvi broj je pomak duž X ose, drugi je pomak duž Y ose.
Na ovaj način možete zamijeniti mnoge predloške slike jednom, jedina razlika će biti u položaju ove slike. Posao je veoma mukotrpan, ali svako to može.
Ovim je dovršeno kreiranje CSS sprijtova za stranicu. Slijedite upute i uspjet ćete.
U bliskoj budućnosti ću snimiti video tutorijal u kojem ću pokušati detaljno prikazati i govoriti o kreiranju CSS spriteova.
A evo i obećanog video tutorijala:
I mali cheat sheet, css stilovi i liste korištene u video tutorijalu, možete preuzeti cheat sheet Evo.
To je sve za mene danas. Prijatelji, zelim vam svu srecu!