Генератор CSS Sprite-образов

Объединяет несколько загруженных изображений (PNG, JPEG или SVG) в один PNG-спрайт-лист, отрисовываемый на canvas, и генерирует соответствующие правила CSS background-position. Предлагаются три макета: horizontal, vertical и packed (перенос по строкам). Между спрайтами можно вставить необязательный отступ в пикселях (padding).

1. Нажмите на зону загрузки или перетащите на неё файлы изображений. Принимаются PNG, JPEG и SVG; файлы, не являющиеся изображениями, отфильтровываются. 2. Выберите Layout (Horizontal, Vertical, Packed) и необязательный Padding в пикселях (0-100). 3. Нажмите Generate. На фоне в виде шахматной доски появится предпросмотр спрайта. 4. Нажмите Download, чтобы сохранить sprite.png, и используйте Copy CSS, чтобы скопировать сгенерированные правила CSS.

Horizontal располагает изображения слева направо в один ряд, высота которого равна самому высокому изображению. Vertical складывает их сверху вниз в колонку, ширина которой равна самому широкому изображению. Packed переносит строки на основе ширины, выведенной из ceil(sqrt(count)), умноженной на ширину самого широкого изображения. Сгенерированный CSS выдаёт по одному классу '.icon-<name>' на каждое изображение, с width, height, объявлением 'background: url(sprite.png) no-repeat' и отрицательным background-position. Из имён файлов удаляется расширение, а сами имена нормализуются к [a-zA-Z0-9_-].