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:

<img src="./en.gif"/>

Použití CSS sprites:

<div class="en"/></div>

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):

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

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

Napsat komentář

Jméno *
Email *
Webová stránka