Automatyczne generowanie CSS Sprite

CSS Sprite te technika, która pozwala na zapisaniu w jednym pliku wielu małych i średnich obrazków, ikonek, emotek. Dzięki temu oszczędzamy na żądaniach HTTP a co za i tym idzie na szybkości wczytywania strony.

Jeszcze do niedawna trzeba było samemu tworzyć pliki sprite. Wiązało się to ze żmudnym dostrajaniem parametru "background-position" w CSS. Aktualnie w sieci jest dostępnych kilka generatorów takich plików. Wystarczy wpisać w wyszukiwarce "CSS Sprite generator" aby znaleźć trochę wartych uwagi pozycji.

Sam korzystam na co dzień z aplikacji css.spritegen.com. Polecam ją każdemu kto chce szybko stworzyć swojego sprite. Po uploadzie zdjęć, skrypt generuje nam kod css oraz jeden plik graficzny, na którym znajdują się wcześniej przesłane fotki. Nie ma już potrzeby samodzielnego generowania plików css czy testowania parametru background-image z css.

Przykładowy plik z ikonkami może wyglądać tak:

Natomiast wygenerowany kod CSS tak:

/* Generated by http://css.spritegen.com CSS Sprite Generator */

.iko2, .iko3, .iko1
{ display: block; background: url('tmp.png') no-repeat; }

.iko2 
{ background-position: -0px -0px; width: 26px; height: 26px; }
.iko3 
{ background-position: -0px -26px; width: 26px; height: 26px; }
.iko1 
{ background-position: -0px -52px; width: 26px; height: 26px; }

Teraz wystarczy w kodzie html strony umieścić np. element span o klasie ".iko1" :)

 

[wróć]

Komentarze (0)
     Trwa ładowanie komentarzy
Zostaw komentarz