CSS sprites

CSS sprites je technika, při které se do jednoho obrázku naskládá několik malých obrázků. Při vykreslování na stránce se pak použije CSS pozicování, které z ono velkého obrázku ukáže jen příslušnou část „podobrázku“.

Nejčastěji se takto slučují všelijaké malé ikonky, tlačítka, …

Výhoda této techniky je, že se stahuje pouze jeden soubor pro třeba 10 malých obrázků, což urychluje zobrazení stránky.

Příklad zde – CSS sprites example

Klasické vložení obrázku:

[html]<img src="./en.gif"/>[/html]

Použití CSS sprites:

[html]<div class="en"/></div>[/html]

příslušné CSS (pro každý obrázek je třeba znát jeho rozměry a prostorové umístění ve „velkém“ obrázku):

[css]
div.en {
width: 20px;
height: 12px;
background-repeat: no-repeat;
background-image: url(sprites.png);
background-position: 0px 0px;
}[/css]

Zajímavé odkazy:
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
Date Display Technique with Sprites

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *