CSS3 - Sprites

Šta je Sprite?

Sprite-ovi su dvodimenzionalne slike koje se sastoje od kombinovanja malih slika u jednu veću sliku na definisanim X i Y koordinatama. Da biste prikazali jednu sliku iz kombinovane slike, mogli biste koristiti CSS svojstvo background-position, definišući tačan položaj slike koja će se prikazati.


Prednost upotrebe CSS Image Sprite-a

Web stranici sa mnogo slika, posebno mnogo malih slika, kao što su ikone, dugmad itd., može dugo trajati učitavanje i generiše višestruke zahtjeve servera. Korištenje sprite-ova slika umjesto zasebnih slika znatno će smanjiti broj HTTP zahtjeva koje pretraživač upućuje serveru, što može biti vrlo efikasno za poboljšanje vremena učitavanja web stranica i ukupnih performansi web sajta.


Kreiranje slikovnog Sprite

Ovu sprite sliku napravili smo kombinovanjem 10 zasebnih slika u jednoj slici (mySprite.png). Možete stvoriti svoj vlastiti sprite koristeći bilo koji alat za uređivanje slika koji vam se sviđa.


Klikni na sliku kako bi je preuzeo mySprite.png sliku




Prikazivanje ikonu iz Image Sprite-a

Konačno, koristeći CSS, možemo prikazati samo dio sprite-a slike koji nam je potreban. Prije svega, kreiraćemo klasu .sprite koja će učitati našu sliku sprite-a. Na ovaj način se izbjegava ponavljanje, jer sve stavke dijele istu pozadinsku sliku. 

.sprite {
    background: url("images/mySprite.png") no-repeat;
}

Sada moramo definisati klasu za svaku stavku koju želimo prikazati. Na primjer, za prikaz ikone Internet Explorer iz slike sprite CSS kod bi bio kao u sljedećem primjeru. 

.ie {
    width: 50px; /* Širina ikone */
    height: 50px; /* Visina ikone */
    display: inline-block; /* Prikaz ikone kao linijski blok */
    background-position: 0 -200px; /* Položaj pozadine ikone u sprite-u */
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS Sprite</title>
<style>
    .sprite {
        background: url("/examples/images/mySprite.png") no-repeat;
    }
    .ie {
        width: 50px; /* Širina ikone */
        height: 50px; /* Širina ikone */
        display: inline-block; /* Prikaz ikone kao linijski blok */
        background-position: 0 -200px; /* Položaj pozadine ikone u sprite-u */
    }
</style>
</head>
<body>
  <span class="sprite ie"></span>
</body>
</html>

Sad se postavlja pitanje, kako smo dobili te vrijednosti piksela za položaj u pozadini? Pa hajde da saznamo . Prva vrijednost je vodoravni položaj, a druga vertikalni položaj pozadine. Kako gornji lijevi ugao ikone Internet Explorera dodiruje lijevu ivicu, tako da je njegova vodoravna udaljenost od početne točke, tj. gornji lijevi ugao spritea slike 0, a budući da je postavljena na 5. poziciju, tako je i njena okomita udaljenost od početne tačke sprite-a slike je 4 X 50px = 200px, jer je visina svake ikone 50px.

Da bismo prikazali ikonu Internet Explorera, moramo pomaknuti njen gornji lijevi ugao na početnu točku, tj. gornji lijevi ugao slike (mySprite.png). Takođe, budući da je ova ikona postavljena na vertikalnoj udaljenosti od 200px, moraćemo pomaknuti cijelu pozadinsku sliku (mySprite.png) vertikalno za 200px, što zahtijeva da vrijednost primijenimo kao negativan broj koji iznosi -200px, jer negativna vrijednost čini da ide vertikalno gore, dok bi je pozitivna pomaknula prema dolje. Međutim, ne zahtijeva horizontalni pomak, jer nema piksela prije gornjeg lijevog ugla ikone Internet Explorer.


Kreiranje menija za navigaciju pomoću CSS Image Sprite-a

U prethodnom dijelu smo naučili kako prikazati pojedinačnu ikonu iz slikovnog spriteta. Ovo je najlakši način za korištenje spriteova slika, sada idemo naprijed gradeći navigacijski meni s efektom rollover. Ovdje ćemo koristiti istu sliku sprite-a (mySprite.png) za stvaranje našeg navigacijskog menija.


HTML navigacija

Započećemo sa izradom našeg navigacijskog menija s HTML-om neuređenom listom. 

<ul class="menu">
    <li class="firefox"><a href="#">Firefox</a></li>
    <li class="chrome"><a href="#">Chrome</a></li>
    <li class="ie"><a href="#">Explorer</a></li>
    <li class="opera"><a href="#">Opera</a></li>
    <li class="safari"><a href="#">Safari</a></li>
</ul>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<titlePrimjer Sprite Menu Markup</title>
</head>
<body>
  <ul class="menu">
        <li class="firefox"><a href="#">Firefox</a></li>
        <li class="chrome"><a href="#">Chrome</a></li>
        <li class="ie"><a href="#">Explorer</a></li>
        <li class="opera"><a href="#">Opera</a></li>
        <li class="safari"><a href="#">Safari</a></li>
    </ul>
</body>
</html>

Primjena CSS-a na navigaciju

Sljedeći dijelovi opisaće vam kako pretvoriti jednostavnu neuređenu listu navedenu u gornjem primjeru u navigaciju koristeći CSS.


Korak 1: Resetovanje strukture liste

Prema zadanim postavkama, HTML poredani popisi prikazuju se s oznakama. Moraćemo ukloniti zadane oznake postavljanjem atributa type-list-type na none. 

ul.menu {
    list-style-type: none;
}
ul.menu li {
    padding: 5px;
    font-size: 16px;
    font-family: "Trebuchet MS", Arial, sans-serif;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer resetovanja Sprite Menu liste</title>
<style>
    ul.menu {
        list-style-type: none;
    }
    ul.menu li {
        padding: 5px;
        font-size: 16px;
        font-family: "Trebuchet MS", Arial, sans-serif;
    }
</style>
</head>
<body>
  <ul class="menu">
        <li class="firefox"><a href="#">Firefox</a></li>
        <li class="chrome"><a href="#">Chrome</a></li>
        <li class="ie"><a href="#">Explorer</a></li>
        <li class="opera"><a href="#">Opera</a></li>
        <li class="safari"><a href="#">Safari</a></li>
    </ul>
</body>
</html>

Korak 2: Postavljanje zajedničkih svojstava za svaki link

U ovome koraku ćemo postaviti sva uobičajena CSS svojstva koja će sve veze (linkove) dijeliti. Kao što su: boja, pozadina, prikaz, podloga itd. (eng. color, background-image, display, padding, etc) 

ul.menu li a {
    height: 50px;
    line-height: 50px;
    display: inline-block;
    padding-left: 60px; /* Prosijavanje teksta sa slike u pozadini */
    color: #3E789F;
    background: url("images/mySprite.png") no-repeat; /* Kao i svi linkovi, dijele istu pozadinsku sliku */
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer postavljanja zajedničkog svojstva veze za Sprite Menu</title>
<style>
    ul.menu {
        list-style-type: none;
    }
    ul.menu li {
        padding: 5px;
        font-size: 16px;
        font-family: "Trebuchet MS", Arial, sans-serif;
    }
    ul.menu li a {
        height: 50px;
        line-height: 50px;
        display: inline-block;
        padding-left: 60px; /* Prosijavanje teksta sa slike u pozadini */
        color: #3E789F;
        background: url("images/mySprite.png") no-repeat; /* Kao i svi linkovi, dijele istu pozadinsku sliku */
    }
</style>
</head>
<body>
  <ul class="menu">
        <li class="firefox"><a href="#">Firefox</a></li>
        <li class="chrome"><a href="#">Chrome</a></li>
        <li class="ie"><a href="#">Explorer</a></li>
        <li class="opera"><a href="#">Opera</a></li>
        <li class="safari"><a href="#">Safari</a></li>
    </ul>
</body>
</html>

Korak 3: Postavljanje zadanog stanja svake veze (linka)

Sada moramo definisati klasu za svaku stavku u meniju, jer svaka stavka u slikovnom spriteu ima drugačiji položaj pozadine. Na primjer, ikona Firefox postavljena je na početnu tačku, tj. gornji lijevi ugao spritea slike, tako da nema potrebe za pomicanjem pozadinske slike. Zbog toga bi vertikalni i horizontalni položaj pozadine u ovom slučaju bio 0. Slično tome, možete definisati položaj pozadine za druge ikone unutar spritea slike. 

ul.menu li.firefox a {
    background-position: 0 0;
}
ul.menu li.chrome a {
    background-position: 0 -100px;
}
ul.menu li.ie a {
    background-position: 0 -200px;
}
ul.menu li.safari a {
    background-position: 0 -300px;
}
ul.menu li.opera a {
    background-position: 0 -400px;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer postavljanja zajedničkog svojstva veze za Sprite Menu</title>
<style>
    ul.menu {
        list-style-type: none;
    }
    ul.menu li {
        padding: 5px;
        font-size: 16px;
        font-family: "Trebuchet MS", Arial, sans-serif;
    }
    ul.menu li a {
        height: 50px;
        line-height: 50px;
        display: inline-block;
        padding-left: 60px; /* Prosijavanje teksta sa slike u pozadini */
        color: #3E789F;
        background: url("images/mySprite.png") no-repeat; /* Kao i svi linkovi, dijele istu pozadinsku sliku */
    }
    ul.menu li.firefox a {
        background-position: 0 0;
    }
    ul.menu li.chrome a {
        background-position: 0 -100px;
    }
    ul.menu li.ie a {
        background-position: 0 -200px;
    }
    ul.menu li.safari a {
        background-position: 0 -300px;
    }
    ul.menu li.opera a {
        background-position: 0 -400px;
    }
</style>
</head>
<body>
  <ul class="menu">
        <li class="firefox"><a href="#">Firefox</a></li>
        <li class="chrome"><a href="#">Chrome</a></li>
        <li class="ie"><a href="#">Explorer</a></li>
        <li class="opera"><a href="#">Opera</a></li>
        <li class="safari"><a href="#">Safari</a></li>
    </ul>
</body>
</html>

Korak 4: Dodavanje stanja veza (linka)

Dodavanje stanja hover ima isti princip kao i dodavanje gornjih veza (linkova). Samo pomaknite njihov gornji lijevi ugao na početnu tačku (tj. gornji lijevi ugao) spritea slike kao što smo to učinili gore. Možete jednostavno izračunati položaj pozadine pomoću sljedeće formule. Vertikalni položaj stanja hover = Vertikalni položaj normalnog stanja -50px. Kako su rollover slike malo ispod zadanog stanja, a visina svake ikone jednaka je 50px. Stanje hover ikona takođe ne zahtijeva horizontalni pomak, jer nema piksela prije gornjeg lijevog ugla. 

ul.menu li.firefox a:hover {
    background-position: 0 -50px;
}
ul.menu li.chrome a:hover {
    background-position: 0 -150px;
}
ul.menu li.ie a:hover {
    background-position: 0 -250px;
}
ul.menu li.safari a:hover {
    background-position: 0 -350px;
}
ul.menu li.opera a:hover {
    background-position: 0 -450px;
}

Gotovo! Evo našeg konačnog HTML i CSS koda nakon kombinovanja cijelog procesa: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer Sprite navigacijskog menija</title>
<style>
    ul.menu {
        list-style-type: none;
    }
    ul.menu li {
        padding: 5px;
        font-size: 16px;
        font-family: "Trebuchet MS", Arial, sans-serif;
    }
    ul.menu li a {
        height: 50px;
        line-height: 50px;
        display: inline-block;
        padding-left: 60px; /* Prosijavanje teksta sa slike u pozadini */
        color: #3E789F;
        background: url("images/mySprite.png") no-repeat; /* Kao i svi linkovi, dijele istu pozadinsku sliku */
    }
    ul.menu li.firefox a {
        background-position: 0 0;
    }
    ul.menu li.chrome a {
        background-position: 0 -100px;
    }
    ul.menu li.ie a {
        background-position: 0 -200px;
    }
    ul.menu li.safari a {
        background-position: 0 -300px;
    }
    ul.menu li.opera a {
        background-position: 0 -400px;
    }
    ul.menu li.firefox a:hover {
        background-position: 0 -50px;
    }
    ul.menu li.chrome a:hover {
        background-position: 0 -150px;
    }
    ul.menu li.ie a:hover {
        background-position: 0 -250px;
    }
    ul.menu li.safari a:hover {
        background-position: 0 -350px;
    }
    ul.menu li.opera a:hover {
        background-position: 0 -450px;
    }
</style>
</head>
<body>
    <ul class="menu">
        <li class="firefox"><a href="#">Firefox</a></li>
        <li class="chrome"><a href="#">Chrome</a></li>
        <li class="ie"><a href="#">Explorer</a></li>
        <li class="opera"><a href="#">Opera</a></li>
        <li class="safari"><a href="#">Safari</a></li>
    </ul>
</body>
</html>



Klikni na sliku kako bi preuzeo kompletan kod