Инструмент для CSS-спрайтов

Question

[Jazzist]

Какие инструменты для работы со спрайтами CSS наиболее удобны и почему?

Заведомо спасибо за развернутые ответы!

Answer 1

[loat]

для меня легче всего использовать Compass или imageMagick для создания спрайтов

пример ImageMagick: convert *png -append result-sprite.png

пример Compass:

@import «icon/*.png»;
@include all-icon-sprites;

.new { @include icon-sprite(new); }
.edit { @include icon-sprite(edit); }
.save { @include icon-sprite(save); }
.delete { @include icon-sprite(delete); }

Comments

[Jazzist]

Действительно, imagemagick наше все, но есть нужда генерировать правила для CSS. Изучаю compass.

[tytkawa]

$icon-sprite-dimensions: true;
добавит ширину и высоту для каждого класса

Answer 2

[philpirj]

Вот очень мощная штука, Compass. Не уверен, насколько она будет удобна именно Вам, но в целом, позволяет объединять все иконки в одну на этапе сборки или деплоя, сильно сокращая количество запросов к серверу, если иконок на странице сразу много.
Удобно то, что в оригинале это всё-таки куча иконок, и начего каждый раз вручную склеивать не нужно.
Документации не густо, но можно найти примеры по блогам.

Comments

[Jazzist]

Спасибо!

[Tiradoir]

Огромное спасибо!

Answer 3

[SEObomj]

Я использую фотошоп, просто потому что привык. Многие хвалят сервис www.spritebox.net и возможно я и сам на него скоро перейду. Удобство сервиса в том, что у него больше инструментов для работы со спрайтами. Можно например сразу CSS создать.

Comments

[Jazzist]

Спасибо, изучаю spritebox. Правда, на нем жутко виснет мозилла — сейчас пытаюсь понять, почему.

[SEObomj]

Версия 3,6 очень плохо переваривает большой объем js. Как дела обстоят на 4 версии не знаю.