PDA

Просмотр полной версии : Иконка любого цвета (с помощью одной картинки)


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

Наша иконка будет выглядеть так:
[Ссылки могут видеть только зарегистрированные и активированные пользователи] ([Ссылки могут видеть только зарегистрированные и активированные пользователи])

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

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

* html a.rssicon32 {
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader (src='rss32.png', sizingMethod='scale');
background-image:none;
}

Пример использования вот тут ([Ссылки могут видеть только зарегистрированные и активированные пользователи]).

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