Aceasta unealta iti permite sa automatizezi procesul de generare a unui Sprite CSS. Ofera-i o simpla arhiva ZIP care sa contina 2 sau mai multe imagini (GIF, PNG sau JPG) si ea iti va genera o imagine sprite corespunzatoare regulilor CSS targetate pentru a afisa fiecare imagine componenta.

Optiuni

Unealta are o serie de optiuni pentru configurarea caracteristicilor imaginii sprite generate si a stilului CSS pentru o mai buna potrivire cu setarile site-ului tau. Aceste optiuni sunt detaliate mai jos:

Redimensionare imagini sursa

Lungime & Inaltime
Daca lungimea sau inaltimea imaginilor sursa vor fi setate mai jos de 100%, acestea vor fi reduse in marime inainte de a fi copiate in imaginea generata. Unealta nu te va lasa sa specifici o valoarea mai mare de 100% deoarece va rezulta o reducere a calitatii imaginii. Valoarea initiala pentru lungime si inaltime este 100% (neredimensionata)

Imaginile duplicate

Ignora imaginile duplicate
Imaginile duplicate sunt copiate in imaginea generata si sunt create reguli individuale CSS pentru fiecare duplicat.
Sterge imaginile duplicate dar combina clasele
Unealta va compara continutul MD5 a fiecarei imagini pentru a determina cu exactitate care sunt imaginile duplitate din arhiva ZIP. Aceste duplicate sunt abandonate si regulile CSS corespunzatoare vor fi combinate intr-o singura regula.

Optiuni de afisare Sprite

Margine orizontala
Acesta determina spatiul orizontal dintre randuri la afisare. Aceasta valoare trebuie sa fie destul de mare, luand in considerare problema repetarii fundalului in Safari. Iti sugeram sa ramai la ramai la valoarea initiala.
Margine verticala
Aceasta determina valoarea spatiului vertical dintre fiecare imagine consecutiva. Valoarea optiunii trebuie sa tina cont si de posibila crestere a marimii fontului de catre utilizator. In general, recomandam sa oferi posibilitatea utilizatorului de a dubla marimea fontului afisat inainte ca urmatoarea imagine din secventa sa fie vizibila.
Intrerupe coloanele pentru a repara o problema in Opera
Opera 9.0 si versiunile inferioare au o problema care afecteaza marginea fundalului CCS mai mica de -2042px. Toate valorile mai mici decat aceasta sunt interpretate exact -2042px. Selectand aceasta optiune, Generatorul de Sprite CSS va crea o noua coloana de fiecare data cand marginea verticala atinge valoarea de -2000px.
Culoare fundal
Seteaza o culoare de fundal pentru imaginea generata. Aceast camp utilizeaza o valoare hexazecimala a culorii din 6 digiti. Lasata necompletata si cu formatul de generare setat ca GIF sau PNG, fundalul va fi transparent.
Formatul de iesire
Suporta formatele GIF, PNG si JPG. Formatele GIF si PNG pot avea fundalul transparent. Formatul initial este PNG.
Numarul de culori
Restrictioneaza numarul de culori utilizat in formatul de iesire generat oentru a reduce marimea acestuia. Aceasta optiune este aplicabila la formatele PNG si GIF.
Calitate imaginii
Specifica calitatea imaginii generate in procente. Aceasta optiune este valabila numai pentru formatul JPEG.
Compresie imagine cu OptiPNG
Utilizata, fisierul imagine generat va fi comprimat cu OptiPNG pentru a-i reduce marimea. Adesea, marimea este redusa la jumatate din initial. Aceasta optiune este valabila numai pentru formatul PNG.

Optiuni de generare CSS

Prefix CSS
Fiecare regula CSS generata este precedata de sufixul precizat. Suporta prefixele id de baza si selectorii de clasa. Urmatoarele caractele sunt permise - a-z, 0-9, _, -, # si .
Potrivirea tiparului de nume a fisierului
orice expresie regulara poate fi utilizata. Inchide intre paranteze rotunde sectiunea care doresti sa fie extrasa din numele fiecarei imagini. Acestea vor fi utilizate ca fundament pentru numele claselor.
Prefixul clasei
Textul introdus va fi utilizat inaintea numelui fiecare clase CSS generate. In mod particular, aceasta optiune este importanta de utilizat atunci cand numele clasei generate va incepe cu un numar, ceea ce va genera un selector invalid (asa cum este definit in recomandarile W3C). Urmatoarele caracte sunt permise - a-z, 0-9, _ si -. Valoarea prefixului furnizat nu poate incepe cu un numar.
Sufix CSS
Valoarea introdusa va fi adaugata la sfarsitul fiecarei regului CSS. "Sufixul CSS" utilizeaza acelasi tip de caractere ca si "Clasa prefix".