Как стать автором
Обновить

Как сделать RSS иконку любого цвета, используя одну картинку

CSS
Как сделать RSS иконку любого цвета, используя одну картинку
В этой статье я расскажу вам как сделать RSS иконку любого цвета, используя всего одну картинку.

Идея заключается в том, чтобы использовать -элемент, фоном которого будет картинка в формате .png, а цвет фона элемента будет цветом нашей иконки. Мы возьмем именно png изображение, чтобы воспользоваться свойством сохранения прозрачности этого формата.

Наша иконка будет выглядеть так:

Я специально сделала подложку черного цвета, чтобы картинка не сливалась с белым фоном. Оригинал можно взять здесь.

HTML-код:

CSS:
a.rssicon32 {
display:block;
width:32px;
height:32px;
background:#ff6600 url(rss32.png); /*иконка будет оранжевого цвета*/
}

a.rssicon32:hover {
background-color:#0096ff; /*при наведении на иконку, она станет голубой*/
}

Результат можно увидеть здесь

Для корректного отображения в IE6 использован следующий код:
* html a.rssicon32 {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='rss32.png', sizingMethod='scale');
background-image:none;
}

Несомненно, такое представление RSS иконки привлечет пользователя. Для большего эффекта можно сделать нечто подобное тому, как реализована подсветка логотипа на сайте студии Артемия Лебедева — наведите на логотип-«штрихкод» в правой части сайта несколько раз.

Однако, в нашей реализации есть минусы: поисковые системы не увидят картинку и у ссылки нет анкора. Давайте это исправим. Для этого будем использовать один из трюков замещения картинки текстом, например, используем свойство text-indent и установим ему отрицательное значение:
text-indent: -9999px;

Ну вот, теперь поисковик прочтет нашу ссылку с анкором, и внешне, это не навредит нашей иконке.

via Onyx Design Blog
Кросс-пост Блог для вебмастеров
Теги:pngrssиконкицветаcssrollover
Хабы: CSS
Всего голосов 81: ↑66 и ↓15 +51
Просмотры4.5K

Похожие публикации

Frontend Developer (JS/jQuery/CSS/Webasyst)
от 100 000 ₽WebasystМоскваМожно удаленно
Frontend-разработчик
от 60 000 до 130 000 ₽ФЦТ | Моя РоссияМожно удаленно
Fullstack-программист Laravel (удалённо)
от 100 000 до 160 000 ₽169.ruМожно удаленно
Frontend разработчик
от 100 000 до 150 000 ₽Arum TradeМожно удаленно
Дизайнер интерфейсов
от 120 000 до 160 000 ₽HttpLabРостов-на-ДонуМожно удаленно

Лучшие публикации за сутки