Удобный способ вёрстки универсальных иконок

Приветствую вас, читатели Тру-Кодера. Сегодня я расскажу вам об одном очень удобном способе вёрстки иконок, который уменьшит размер используемой для иконок графики и упростит создание css-спрайтов. Данный способ применим в основном в тех случаях, когда иконки находятся на однородном фоне. Итак, приступим.

Предположим, у нас есть вот такая иконка с прозрачным фоном (в картинках для наглядности буду использовать «клетчатый» фон, который будет обозначать прозрачность):

true-icon :)

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

true-icon-sprite

В оригинале в png-формате этот спрайт весит 2.65 КБ. Ну и дальше могли бы использовать этот спрайт по назначению.

Но есть лучший способ.

Сейчас нам придется немного поработать в Фотошопе. Предположим у нашего сайта белый фон. Создаем в Фотошопе изображение размером с нашу иконку. В моем случае — 64×64 пикселя. Преобразовываем фон в слой (Правый клик по слою на палитре слоёв > Layer From Background… > OK). Заливаем фоновый слой созданного изображения таким же цветом, как и фон нашего сайта. Закидываем в это изображение нашу иконку. Выбираем фоновый слой, зажимаем CTRL и кликаем по превьюшке слоя с иконкой. Загрузится выделение в форме иконки.

true-icon-selection

Жмём DELETE. В результате из фонового слоя вырезалась форма иконки. Скрываем слой с иконкой и сохраняем изображение в формате png.

true-icon-good

В итоге оригинальное изображение весит 2.1 КБ — не многим меньше, чем спрайт, но далее раскроются все прелести данного подхода.

Теперь, всё что нам остаётся — вставить картинку и задать ей нужный цвет фона.

HTML:

<img src="true-icon.png" alt="" class="true-icon red-icon" />
<img src="true-icon.png" alt="" class="true-icon green-icon" />
<img src="true-icon.png" alt="" class="true-icon blue-icon" />

CSS:

.red-icon {
    background-color: #c54949;
}
 
.green-icon {
    background-color: #9ebe65;
}
 
.blue-icon {
    background-color: #6597be;
}
 
.true-icon:hover {
    background-color: #444;
}

Цвет фона, естественно, может меняться при наведении курсора и прочих событиях и при этом нам не придется работать с графикой, если понадобиться добавить еще какой-либо цвет.

Результат

На этом всё, подписывайтесь на обновления, оставайтесь с нами, пока!

  • А где сам код джейквери та? Не понятно как осуществляется это действие.

  • Очень классная фишка! Все гениальное просто)
    Я помню по похожему принципу делали возможность просмотра товара в разных цветах. Тоже с помощью таких масок.

  • Artem

    ВКонтакте этот способ используется для некоторых иконок. Единственный минус — невозможность менять фон под иконками, в данном примере фон должен быть всегда белым.

    • Можно конечно сделать спрайт с разными вариантами фона, но немного пропадает смысл)

  • Vitaliy Leonov

    имхо, для таких вещей логичнее использовать svg или шрифтовые иконки