Генератор CSS спрайтов

CSS Sprite Generator

Сервис от Projectfondue, генератор CSS спрайтов.

Как это работает

1. Собираем требуемые картинки в папку (ну так лично мне удобнее).
2. Жмем на сайте синенький пункт меню CLEAR, чтобы убрать существующие там иконки для примера.
3. Настраиваем:
   • Вы задаете расстояние между картинок, и до края. Они предложили сразу 50, но это много. Ноль не прошел, потом мы выставили 1, что вполне достаточно.
   • Можно задать цвет фона или сделать прозрачным.
   • Имена переменным будут присвоены по именам картинок в архиве. В форме вы можете добавить ко всем именам префикс или суффикс, ну или оставить поле пустым.
   • Можно сделать картинку компактной, вертикальной или горизонтальной.
   • Картинку можно встроить конвертируя в Base64 в CSS файл.
4. Перетаскиваем файлы из нашей папки в это поле.
5. Как только ваши иконки стали четкими, а не бледными и мерцающими, как вначале, спрайт готов.
6. Жмем зеленую кнопку Download, а затем появившиеся зеленые кнопки Spritesheet и Stylesheet.
7. Полученный текст корректируем под наш сайт.

Эта техника может быть очень эффективной для того, чтобы улучшить работу сайта, особенно в ситуации, когда используется много маленьких изображений, таких как иконки меню. Yahoo!, например, использует эту технику именно для этого.

Офлайн

Возникла необходимость сделать 3 спрайта более 100 иконок каждый, но пропал интернет, успел создать только 1 спрайт.
Успел закинуть картинки на 2-й и сразу интернета не стало.
Тем не менее, 2-й спрайт был создан. Результат я благополучно скачал.
Решил попробовать 3-й, самый большой. Ведь страница уже открыта и перезагрузка не требуется, он тоже был создан штатно, то бишь как так и надо.

Вывод, станица не требует перезагрузки, значит используется Javascript, то есть обработка процесса происходит в браузере, интернет не требуется. Важно, чтобы была загружена страница.

CSS Sprites Generator

Перетаскиваем в поле картинки или выбираем нажав кнопку Choose files.
В результате получаем картинку спрайта в .PNG и CSS код, который очевидно стоит самому допилить, потому что вы получите для каждой картинки отдельно полный код.

Перетаскиваем в поле картинки или выбираем нажав кнопку Выбрать.
Ждем пока они неспешно подгрузятся.
Тут мы ждем еще добавить или удалить ненужные.
Затем жмем создать и скачиваем архив: папка с нашими картинками (непонятно зачем), спрайт в .PNG и CSS код, который очевидно стоит самому допилить, потому что вы получите для каждой картинки отдельно полный код.