Приветствую вас, читатели порталата MyWebCenter. Сегодня я расскажу вам об одном очень удобном способе вёрстки иконок, который уменьшит размер используемой для иконок графики и упростит создание css-спрайтов. Данный способ применим в основном в тех случаях, когда иконки находятся на однородном фоне. Итак, приступим.
Предположим, у нас есть вот такая иконка с прозрачным фоном (в картинках для наглядности буду использовать «клетчатый» фон, который будет обозначать прозрачность):
которая по наведению должна становиться другого цвета, например, красного, зеленого, синего… В зависимости от того места, где мы используем эту иконку на сайте. Для решения данной задачи можно было бы сделать следующий спрайт (картинка кликабельна):
В оригинале в png-формате этот спрайт весит 2.65 КБ. Ну и дальше могли бы использовать этот спрайт по назначению.
Но есть лучший способ.
Сейчас нам придется немного поработать в Фотошопе. Предположим у нашего сайта белый фон. Создаем в Фотошопе изображение размером с нашу иконку. В моем случае — 64×64 пикселя. Преобразовываем фон в слой (Правый клик по слою на палитре слоёв > Layer From Background… > OK). Заливаем фоновый слой созданного изображения таким же цветом, как и фон нашего сайта. Закидываем в это изображение нашу иконку. Выбираем фоновый слой, зажимаем CTRL и кликаем по превьюшке слоя с иконкой. Загрузится выделение в форме иконки.
Жмём DELETE. В результате из фонового слоя вырезалась форма иконки. Скрываем слой с иконкой и сохраняем изображение в формате png.
В итоге оригинальное изображение весит 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; }
Цвет фона, естественно, может меняться при наведении курсора и прочих событиях и при этом нам не придется работать с графикой, если понадобиться добавить еще какой-либо цвет.
Результат
На этом всё, подписывайтесь на обновления, оставайтесь с нами, пока!