Generator kształtów CSS

Łączy wiele przesłanych obrazów (PNG, JPEG lub SVG) w jeden arkusz sprite PNG renderowany na canvasie i emituje pasujące reguły CSS background-position. Oferowane są trzy układy: horizontal, vertical oraz packed (zawijanie wierszy). Opcjonalne wypełnienie w pikselach (padding) może być wstawiane między sprite'y.

1. Kliknij strefę przesyłania lub przeciągnij na nią pliki obrazów. Akceptowane są PNG, JPEG i SVG; pliki inne niż obrazy są filtrowane. 2. Wybierz Layout (Horizontal, Vertical, Packed) oraz opcjonalny Padding w pikselach (0-100). 3. Kliknij Generate. Na tle w szachownicę pojawi się podgląd sprite'a. 4. Kliknij Download, aby zapisać sprite.png, i użyj Copy CSS, aby skopiować wygenerowane reguły CSS.

Horizontal układa obrazy od lewej do prawej w jednym wierszu, którego wysokość równa się wysokości najwyższego obrazu. Vertical układa je z góry na dół w jedną kolumnę, której szerokość równa się szerokości najszerszego obrazu. Packed zawija do wierszy na podstawie szerokości wyprowadzonej z ceil(sqrt(count)) razy szerokość najszerszego obrazu. Wygenerowany CSS emituje po jednej klasie '.icon-<name>' na obraz, z width, height, deklaracją 'background: url(sprite.png) no-repeat' i ujemnym background-position. Nazwy plików są pozbawiane rozszerzenia i normalizowane do [a-zA-Z0-9_-].