Tento nástroj automatizuje proces vytváření CSS spritů. Stačí uploadovat ZIP archiv obsahující 2 nebo více obrázků (GIF, PNG or JPG) a bude vygenerován sprite i odpovídající CSS pravidla pro zobrazení jednotlivých obsažených obrázků.

Nastavení

Generátor CSS spritů obsahuje množství nastavitelných parametrů, kterými můžete ovlivnit vygenerovaný sprite a CSS stylů, aby lépe odpovídaly Vašim požadavkům. Tato nastavení jsou podrobně popsána níže:

Změnit velikost zdrojových obrázků

Šířka & Výška
Pokud je šířka i výška nastavena na méně než 100 %, výchozí obrázky budou před kopírováním do výsledného spritu zmenšeny. Generátor Vám nedovolí nastavit velikost větší než 100 %, neboť by to vedlo ke snížení kvality výsledných obrázků. Výchozí hodnota pro výšku i šířku je 100 % (beze změny velikosti).

Duplicitní obrázky

Ignorovat duplicitní obrázky
Duplicitní obrázky jsou zkopírovány do vygenerovaného spritu a pro každý z duplicitních obrázků je vytvořeno samostatné CSS pravidlo.
Odstranit duplicitní obrázky a sloučit CSS třídy
Nástroj porovná MD5 hashe každého obrázku, čímž zjistí případné duplicity obsažené v ZIP archivu. Nadbytečné duplicitní soubory jsou smazány a jejich CSS pravidla se sloučí do jednoho.

Nastavení spritů

Vodorovný rozestup
Určuje vodorovný rozestup mezi obrázky ve výsledném spritu. Tato hodnota by měla být dostatečně velká s ohledem na chybu v prohlížeči Safari. Doporučujeme ponechat výchozí hodnoty.
Svislý rozestup
Určuje svislý rozestup mezi po sobě následujícími obrázky. Měl by být dostatečně velký s ohledem na to, že uživatel si může zvětšit velikost písma na stránce. Obecně doporučujeme zajistit, aby při dvojnásobném zvětšení písme stránky nedošlo k zobrazení následující ikonky v řadě.
Barva pozadí
Nastavuje barvu pozadí výsledného obrázku. Barvu zadávejte v šestimístném šestnáctkovém formátu. Pokud toto pole ponecháte nevyplněné, bude jako pozadí použita průhledná barava (v případě volby GIF nebo PNG formátu).
Formát výsledného obrázku
Generátor podporuje formáty GIF, PNG a JPG. V případě volby GIF nebo PNG lze použít průhledné pozadí. Výchozím formátem je PNG.

Nastavení CSS

CSS selektory "před"
Každe CSS pravidlo bude doplněno zadanými selektory (např. přidat id nebo class nadřazeného elementu). Můžete zadat následující znaky: a-z, 0-9, _, -, # and .
Regulární výraz pro název souboru
Lze použít libovolný platný regulární výraz. Tu část názvu souboru, kterou chcete použít pro název css tříd, uzavřete do oblých závorek.
Předpona CSS tříd
Text, který zadáte, se použije jako "předpona" před názvem každé CSS třídy. Tuto předponu je obzvlášť duležité specifikovat tam, kde by jinak CSS třída začínala číslicí (selektory začínající číslicí nejsou dle doporučení W3C platné). Povoleny jsou následující znaky a-z, 0-9, _ and -. Předpona nesmí začínat číslicí.
CSS selektory "za"
Text, který zadáte do tohoto pole, bude připojen na konec každého CSS pravidla. Povoleny jsou stejné znaky jako u pole CSS selektory "před"