Калькулятор координат CSS спрайтов Sprite Cow

Продолжая тему CSS спрайтов решил написать очередную статью. На этот раз речь пойдёт о калькуляторе координат CSS спрайтов Sprite Cow. Предыдущие мои статьи касались краткого описания самой технологии css спрайтов: как их готовят, с чем их едят и как их используют, а также программ для создании самих спрайтов (генераторов css спрайтов). Для заинтересованных пользователей ссылки на эти статьи приведу ниже. В предыдущих обзорах описаны программы, которые создают не только сами спрайты, но и сниппеты стилей и html-разметки для практического применения css спрайтов на сайтах. Эти программы помогают создать и разместить css-спрайты на веб-страницах.
А как быть, если вы где-то скачали готовый sprite-pack (мастер-спрайт (спрайт-лист) определенной тематики), которых сейчас очень много в сети, и вы хотите использовать его на своем сайте, но стилей с координатами спрайтов в нем нет? Считать вручную? Это нудно и утомительно. Реализовать задуманное и сделать это просто, легко и элегантно поможет калькулятор координат CSS спрайтов Sprite Cow – программа и сервис для определения координат css спрайтов (свойства background-position) и размеров картинок, входящих в спрайт.
Обзор этой программы рассчитан на среднестатистических пользователей, которые всё же что-то читали или что-то слышали об использовании и применении css спрайтов на веб-сайтах.

Общие сведения о программе Sprite Cow

Как уже было упомянуто, калькулятор координат css спрайтов Sprite Cow существует в двух ипостасях: как онлайновый сервис и в виде браузерной программы, скачать которую можно с сайта проекта на Гитхабе. Программа распространяется свободно и бесплатно под лицензией Apache License 2.0. Sprite Cow позволяет легко и просто открыть имеющийся у вас мастер-спрайт (sprite-pack, sprite sheet, спрайт-лист) и последовательным выделением нужных картинок в спрайте узнать их координаты и размеры для последующего использования в стилевом файле. Всё это в конечном счёте позволит вам корректно разместить нужную вам фоновую картинку-спрайт в нужном месте на веб-странице. Программа позволяет не только узнать, но и скопировать координаты и размеры спрайта для их вставки в соответствующий стилевой файл. Одним из достоинств Sprite Cow является возможность работы под любой операционной системой. Для этого достаточно запустить индексный файл в любом современном браузере. Для своего удобства и удобства заинтересованных русскоязычных пользователей я чуть-чуть русифицировал программу. Скачать русифицированную версию программы можно со страницы загрузки моего ресурса.

Перейдём к теме этого обзора − бесплатной браузерной программе для определения координат и размеров css спрайтов Sprite Cow. Программа, как и многие другие браузерные программы, нормально работает в современных браузерах. Если же вы откроете её в Internet Explorer ниже 10 версии, то она встретит вас соответствующим сообщением.

Сообщение о неподдерживаемом браузере

Кроме этого для нормальной работы программы в браузере должна обеспечиваться поддержка Javascript. Иначе вместо главных кнопок программы вы увидите пустое шахматное поле со всеми вытекающими последствиями.

Заставка Sprite Cow

Программа может использоваться обычным образом или под локальным сервером. Содержимое программы, распространяющееся в виде zip-архива, распакуйте в любую удобную для вас папку, откройте вложенную папку www и запустите файл index.html

Папка программы

Я это делаю в файловом менеджере Total Commander, вы можете делать в любом другом или в Проводнике Windows. Файл unmin.html тоже можно использовать, он аналогичен index.html. Разница их в том, что index.html использует общий минимизированный файл javascript, а unmin.html использует туеву хучу отдельных неминимизированных файлов javascript. Последний позволяет проще разобраться в работе программы и, возможно, внести что-то новое. (Мной, однако, переводились index.html и минимизированный mainmin.js).

Использование Sprite Cow

Открытие файла спрайта

После запуска индексного файла открывается главное окно программы с заставкой в виде симпатичной коровы. В окне предлагаются две опции: открыть изображение (ваш мастер-спрайт) или показать демонстрационный образец, имеющийся в арсенале программы. При переводе программы обнаружились строки, которые не отображаются в главном окне во всех трех браузерах, которые я использовал для тестирования. Кое-где в забугорных источниках мне попадались скриншоты программы, где этот текст отображался. Докапываться в чем же дело я не стал – программа нормально работает и без показа этих сообщений. Суть их сводится к следующему: что может делать программа и почему автор ее создал.

Окно программы Sprite Cow

Демонстрационный образец спрайта помимо его основного назначения является мини-руководством программы. Если открыть его и прочитать написанное на картинке, сразу станет ясно для чего предназначена программа и как с ней работать. Рекомендую почитать.

Тест-образец

Отказавшись от использования демо-образца, я решил рассмотреть работу с программой на реальном изображении. Мне понравился файл, содержащий изображения русскоязычных социальных сервисов в формате PNG. Я попробовал открыть файлы всех форматов, которые присутствуют в окне диалога открытия файлов, все они открываются нормально. В папке также присутствует файл формата PSD (фотошоп), но он не отображается в диалоге и, соответственно, не может быть открыт. Откроем файл icons.png и продолжим работу.

Диалог открытия файла

Интерфейс Sprite Cow

Появляется следующее окно программы, представляющее собой рабочее пространство, кусочек которого показан ниже. Как видите, использован мастер-спрайт с прозрачным фоном. Я специально минимизировал и оптимизировал файл для нормального отображения в старых браузерах (глубина цвета 8 бит, фон прозрачный). Более подробно об этом можно узнать в предыдущих статьях о css спрайтах, список которых будет приведен ниже. Рассмотрим кнопки панели инструментов и другие элементы интерфейса программы.

Рабочая область программы
  • Кнопка Открыть позволяет загрузить новое изображение в программу.
  • Следующая кнопка обеспечивает перезагрузку текущего изображения. При этом справа от панели инструментов появляется соответствующая подсказка.
  • Кнопка Выбрать спрайт позволяет щелчком по нужной картинке на мастер-спрайте выделить ее. При этом внизу окна появляется сниппет стиля, соответствующий выбранному спрайту. Сниппет стиля
  • Кнопка Выбрать фон позволяет выбрать фон спрайта. При этом справа от панели инструментов появляется соответствующая информация. Как правило все sprite pack имеют прозрачный фон, но бывает и иначе. В этом случае перед выделением нужной картинки выбирается фон (цвет фона). Об этом имеется информация в упомянутом мини-руководстве. При выборе фона справа от панели инструментов появляется подсказка. Если вы выбрали курсором некорректный фон на спрайте с непрозрачным фоном (или вообще не выбрали), то программа не позволит вам выделить нужную картинку и сообщит об этом подсказкой. На спрайтах с прозрачным фоном его выбирать нет необходимости.
  • Последняя кнопка на панели обеспечивает переключение светлой и тёмной шахматной доски, имитирующей прозрачный цвет фона рабочей области. При этом справа от кнопки также появляется информационная подсказка. Опция полезна для улучшения визуального восприятия при разных цветовых гаммах входных спрайтов.
  • Левая кнопка внизу позволяет внести коррективы в координаты спрайта для лучшего отображения выходных картинок на retina-дисплеях. Информационная подсказка появляется справа от нижних кнопок.
  • Следующая кнопка с изображением процентов вносит в сниппет значение координат спрайта в процентах вместо точных значений в пикселях. Подсказка тоже есть.

Практическое применение css-спрайтов на веб-сайте

Последовательно выделяя необходимые картинки на мастер-спрайте мы можем увидеть их координаты и скопировать в стилевой файл. Мной специально был выбран мастер-спрайт с двумя значками каждого из социальных сервисов. Я хочу показать на демонстрационной странице возможность простой и легкой реализации эффекта замены картинок при наведении мыши (rollover). Эффект реализуется только средствами CSS без какого-либо применения скриптов. Эффект может пригодится для различных случаев и, в частности, для создания элегантных и стильных навигационных меню.
В сниппете, который приведен выше есть все необходимое для создания стилевого файла. Программа даже предлагает нам разместить мастер-спрайт в пока несуществующей папке imgs. Создавать такую папку я не буду, как и файл подключаемых стилей, а просто использую вложенные стили в самой демо-странице. Как уже ранее мной упоминалось в предыдущих статьях, если размер картинок одинаков, то указать его можно только один раз в ссылке на мастер-спрайт. Что мы и сделаем. Кроме того для классов каждого из значков я дам имена по первой букве соответствующего сервиса.
Здесь я приведу только скриншоты кусочков стиля и разметки, полностью посмотреть его можно на демонстрационной странице в режиме источника. Там же можно испытать наши кнопки в работе.

Увидев, что разница в визуализации кнопок соцсетей в обычном состоянии и при наведении не столь значительна, я попозже для пущей убедительности добавил на демо-страницу крупные разноцветные кнопки.

Посмотреть демо-страницу с кнопками социальных сетей.

Стиль

Стиль спрайтов

Разметка

Разметка страницы

Чтобы показать пример использования css-спрайтов на веб-страницах применены простейшие стили и разметка. Естественно, что многие пользователи будут применять свои наработки в соответствии со своими предпочтениями и потребностями. Поле для творчества широчайшее.

Особенность Sprite Cow

Тестируя программу Sprite Cow, я столкнулся с одной особенностью, которую поясню на примере. На моем сайте используется много css спрайтов. Например, кнопки прокрутить страницу вверх, скачать русификатор, просмотреть скриншот и прочие. Сделаны они с эффектом замены изображений, причем размеры этих изображений разные. В основном использованы картинки размером 32х32px для обычного состояния и картинки размером 48х48px при наведении мыши. В свое время я скачал эти картинки с сервисов бесплатных иконок и сделал из них мастер-спрайты в программе Instant Sprite. При создании мастер-спрайта программа, по всей видимости, учитывала размеры загружаемых картинок и в генерируемых стилях указывала соответствующие размеры (32х32px и 48х48px). Загружаемые в Instant Sprite картинки уже изначально имели прозрачный фон. Теперь самое главное – не все картинки (без фонового окружения) имели вышеуказанные размеры. Многие из них были меньшего размера, но при всем при этом Instant Sprite, да и другие протестированные мной генераторы css спрайтов, в стилевых сниппетах указывали размеры спрайт-картинки соответственно размеру картинки входного файла изображения.

Несколько иначе обстоит дело в испытуемой программе Sprite Cow. Принципиальная разница между генераторами css спрайтов и калькулятором координат css спрайтов Sprite Cow состоит в том, что первые генерируют спрайты и стили соответственно загружаемым картинкам, а вторая генерирует стили с указанием координат из готового мастер-спрайта (sprite pack), созданного или вручную в графическом редакторе, или в программе для создания css спрайтов. При этом размеры спрайт-картинки в стилях указываются фактические, то есть без учета фонового окружения, которое могло существовать у этой картинки в момент создания мастер-спрайта. Вполне логично. Приведу пример. Вот один из мастер-спрайтов, используемых на моем сайте. Для наглядности я обвел его рамкой.

Мастер – спрайт

Он создан из значков одного размера 32х32рх. Загрузив его в Sprite Cow, я получил следующие размеры: первые три значка – 32х31рх, четвертый –32х28рх, пятый и шестой – 32х31рх, седьмой – 28х31рх.
На что это может повлиять. Выскажу свое мнение. Поскольку визуализация спрайтов на веб-страницах происходит по базовой линии (по умолчанию, как мне помнится), то при размещении спрайтов примерно одинакового размера даже в непосредственной близости друг от друга ничего существенного не произойдет, разница в размерах невелика. Причем в обоих случаях, как при использовании спрайтов, созданных в спрайт-генераторах, так и при использовании спрайтов, полученных из мастер-спрайта с помощью Sprite Cow.

Однако, есть одна закавыка. Если все картинки в спрайте одного размера, то можно оптимизировать стилевой файл, указав в нём размер только один раз в стиле для мастер-спрайта (как сделали мы чуть выше). Этим можно существенно уменьшить размер стилевого файла при большом количестве картинок, используемых в мастер-спрайте (и, соответственно, на веб-странице). В противном случае (если картинки разных размеров) придется прописывать размеры картинки в стилях для каждого спрайта. При достаточных зазорах (промежутках, смещениях) между одноразмерными картинками в мастер-спрайте можно, конечно, задать один размер и волюнтаристски поиграться координатами. Если уж очень хочется. Как то так. В случае разноразмерных картинок всё же придётся прописывать размеры для каждой картинки. Я считаю, что более правильно сделать несколько спрайтов из картинок одного размера, чем один из разномерных картинок (но, если все картинки разных размеров, тут уж ничего не поделаешь). Однако, на вкус и цвет… вся рыба разная.

Что же делать или как быть?

Обилие расплодившихся за последнее время автоматических и полуавтоматических спрайт-генераторов с одной стороны и присутствие на этом поле калькулятора css спрайтов Sprite Cow с другой стороны наводит на мысль: что же лучше использовать в своей практике. Здесь я солидарен с автором Sprite Cow.
Применение генераторов css спрайтов – очень неплохой вариант, но если вы используете готовые наборы спрайтов или хотите создавать и оптимизировать их в графических редакторах под свои нужды и держать все под контролем, то Sprite Cow вам в помощь. Автор программы исповедует второй вариант создания css спрайтов, поэтому и создал эту программу. Причём он не пользуется готовыми наборами спрайтов, а создает их для своих проектов сам, реализуя тем самым свой творческий потенциал.
Заинтересованные пользователи могут также создавать картинки для css спрайтов с нуля или применять готовые отдельные картинки, компонуя и оптимизируя свои оригинальные мастер-спрайты в графических программах, не задумываясь о последующем расчёте координат спрайтов. Все это сделает Sprite Cow, причем сделает хорошо и аккуратно (с вашей помощью, конечно).
Очень удобно для создания мастер-спрайта (особенно при одноразмерных картинках) использовать отличную бесплатную программу FastStone Image Viewer (или FastStone Capture), где есть простая и удобная опция создания горизонтальной или вертикальной ленты изображений. Комбинируя эти опции можно создать мастер-спрайт и прямоугольной формы. Одновременно в программе FastStone Image Viewer можно оптимизировать спрайт, для этого в ней есть всё необходимое.
Упомяну ещё одну возможность Sprite Cow: картинки в мастер-спрайте можно выделять не только щелчком, но и обычным прямоугольным выделением с захватом нескольких изображений. Кому-нибудь это может пригодиться.

Выделение картинок

На скриншоте показано выделение двух картинок на мастер-спрайте в формате JPG с белым фоном. Для правильного выделения предварительно был выбран белый фон.

Последнее, о чём нужно знать при работе с программой Sprite Cow. Картинки в используемом мастер-спрайте должны иметь между собой обязательные зазоры (отступы, смещения) хотя бы в 1px. В противном случае вы не сможете выделить отдельную картинку – выделяться будет весь мастер-спрайт или его беззазорная часть, если зазоры кое-где существуют.

В заключение привожу обещанный список моих статей на тему css спрайтов.

Вот ссылки на них в порядке публикации:

Если статья вам понравилась, поделитесь с друзьями.