Полупрозрачная картинка-ссылка на CSS

primerst.jpg

Отличная полезняшка, которая многим может пригодиться. Одними лишь средствами 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 и т.д.

Похожие записи:

Оставить комментарий: