Změna velikosti písma

Drobečková navigace

CSS blog > Sprite

Sprite



Co je sprite?

Nejedná se v tomto případě o sladkou limonádu, ale o metodu sjednocení více obrázků do jednoho, které se používají např. na pozadí prvku, včetně obrázků pro indikaci změny stavu prvku (:hover, :focus, :active, :visited). Sprite by měl obsahovat pouze množinu těch obrázků, které mají společný účel. Tedy ve spritu nebude pozadí stránky, hlavička, buttony, pozadí rozcestníku, ale bude v něm třeba pozadí tří buttonů a jejich změny na hover.

Navigace

Použití

Nejčastěji budete (zatím) sprite používat nejspíš pro buttony, rozcestníky a případně obrázkové menu ve svých grafikách. Cílem je, aby se veškeré vizuélní změny stavu prvku načetli již při jeho defaultním stavu, tedy při jeho stažení při zobrazení stránky, a nedocházelo tak k tomu, že se např. při :hover-u začne teprve stahovat nový obrázek a zobrazí se až po chvilce, tj. hlavně podle odezvy serveru a rychlosti připojení uživatele.

Sprite se používá (pro Vaše účely) především tehdy, pakliže se vzhled změny rapidně liší oproti defaultnímu stavu a nestačí na něj pro Vás CSS (opacity, barva rámečku, změna ikony, barva celého obrázku, ...). Zároveň se používá tehdy, pokud používáte obrázek na pozadí v CSS.

Příklad bez spritu

Určitě jste se s tím setkali. Na ukázce (čistě obrázkovou formou) se při hoveru stane tato situace v meziokamžiku, než se načte obrázek hoveru. Není to přímo chyba, jen to není uživatelsky ideální. Obrázky berte jako ilustraci pro potřeby ukázky příkladu.

Default Hover
Výsledek

Příklad se spritem

Pomocí spritu docílíme vynechání meziskoku, že nám problikne "průhledné" pozadí a po chvilce se zobrazí obrázek hoveru. Tedy cílem je tento stav:

Default Hover výsledek

Příklad v praxi

Vzhled spritu

Ukázka spritu. Buď můžete použít nějaký generátor jako TexturePacker (omezená licence), nebo to udělat ručně, popř. jestli existuje plugin do PS? V každém případě je potřeba mít obrázky "vždy" stejného rozměru a správně ořezané, tj. pro jednoduchou manipulaci žádný volný prostor okolo -> nad/pod/vedle. Píšu "vždy", protože tím myslím pro cílový prvek stejné rozměry. Jinak samozřejmě ve spritu můžete mít více obrázků s jinými rozměry.

Sprite může vypadat např. následovně:

Před TinyPNG (166kb) Po TinyPNG (36Kb)

HTML pro bujón

Uvedu příklad, kdy bujón bude mít v sobě i text. Text bude ale mimo obrázek. Proto je potřeba v bujónu udělat samostatný span, kterému budeme nastavovat pozadí ze spritu. Pokud bychom to nastavili, řekněme na odkaz, tak pokud by byl text mimo obrázek defaultního stavu, tak by se do něj vykreslil i další stav ze spritu (snad to popisuju jako člověk:). Zároveň přidám do spanu nějaký text, pokud by ho TinyMCE (text editor) odstranil kvůli tomu, že neobsahuje nic.

<a href="#" class="bujon-sprite" title="Tak určitě...">
  <span class="bujon-sprite-img">temp text</span>
  <span class="bujon-sprite-text">Tak určitě...</span>
</a>

CSS pro bujón

a.bujon-sprite {
display: block;
width: 215px;
}
a.bujon-sprite .bujon-sprite-img {
display: block;
height: 240px;
background-image: url('image.php?nid=11524&oid=3735355');
background-color: transparent;
background-attachment: scroll;
background-position: 0px 0px;
/* odstranění temp. textu */
text-indent: -2000em;
}
a.bujon-sprite:hover .bujon-sprite-img {
background-position: 0px -240px;
}
a.bujon-sprite .bujon-sprite-text {
display: block;
text-align: center;
font-size: 1.3em;
color: white;
}

Výsledek

temp text Tak určitě...

Poznámka

Prakticky se na :hover pouze mění background-position. To samé se provede pokud by jste chtěli na :active/:focus změnit vzhled. Pokud máte sprite správně, změníte jen y souřadnici pozice pozadí a hotovo.


Kalendář akcí

Po Út St Čt So Ne
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 1 2