Полупрозрачная картинка-ссылка на CSS
Отличная полезняшка, которая многим может пригодиться. Одними лишь средствами CSS, без использования дополнительных полупрозрачных png-изображений, можно добиться эффекта полупрозрачности картинки-ссылки в неактивном ее состоянии. Что, в частности, удобно для приглушения яркости всевозможных посторонних кнопок-счетчиков типа Яндекс-денежки или Liveinternet-а, дизигн которых оставляет желать лучшего.
Идею реализации эффекта я нашел у css-tricks.com, за что им громадный респект!
Пример работы эффекта можно посмотреть здесь
Сам эффект реализуется следующим набором правил:
#content img {
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.50;
-khtml-opacity: 0.5;
opacity: 0.5;
}
#content a:hover img {
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1.00;
-khtml-opacity: 1.00;
opacity: 1;
}
Как видите, правил в каждом наборе несколько. Это нужно для работы в различных браузерах. Например, первая строка filter: alpha(opacity=50); предназначена для IE, просто opacity: 0.5; — для большинства версий Firefox, Safari и Opera.
-moz и -khtml, соответственно для старых версий Netscape Navigator и Safari. Правила друг другу не мешают, так что есть смысл прописывать их все.
Сами значения, думаю, интуитивно понятны. Либо 50, либо 0.5. Цифра 100 либо 1 означает полную непрозрачность. Можно выбирать значения на свой вкус: 40 или 0.4, 90 или 0.9 и т.д.
