 CSS Sprite Generator - draeton.github.io/stitches/
email: draeton@gmail.com
Генератор CSS спрайтов.ПодробнееСервис от Projectfondue, генератор CSS спрайтов. Как это работает- Собираем требуемые картинки в папку (ну так лично мне удобнее).
- Жмем на сайте синенький пункт меню CLEAR, чтобы убрать существующие там иконки для примера.
- Настраиваем:
- Вы задаете расстояние между картинок, и до края. Они предложили сразу 50, но это много. Ноль не прошел, потом мы выставили 1, что вполне достаточно.
- Можно задать цвет фона или сделать прозрачным.
- Имена переменным будут присвоены по именам картинок в архиве. В форме вы можете добавить ко всем именам префикс или суффикс, ну или оставить поле пустым.
- Можно сделать картинку компактной, вертикальной или горизонтальной.
- Картинку можно встроить конвертируя в Base64 в CSS файл.
- Перетаскиваем файлы из нашей папки в это поле.
- Как только ваши иконки стали четкими, а не бледными и мерцающими, как вначале, спрайт готов.
- Жмем зеленую кнопку Download, а затем появившиеся зеленые кнопки Spritesheet и Stylesheet.
- Полученный текст корректируем под наш сайт.
Эта техника может быть очень эффективной для того, чтобы улучшить работу сайта, особенно в ситуации, когда используется много маленьких изображений, таких как иконки меню. Yahoo!, например, использует эту технику именно для этого.ОфлайнВозникла необходимость сделать 3 спрайта более 100 иконок каждый, но пропал интернет, успел создать только 1 спрайт.
Успел закинуть картинки на 2-й и сразу интернета не стало.
Тем не менее, 2-й спрайт был создан. Результат я благополучно скачал.
Решил попробовать 3-й, самый большой. Ведь страница уже открыта и перезагрузка не требуется, он тоже был создан штатно, то бишь как так и надо.Вывод, станица не требует перезагрузки, значит используется Javascript, то есть обработка процесса происходит в браузере, интернет не требуется. Важно, чтобы была загружена страница. |
