Полупрозрачная картинка-ссылка на 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 и т.д.

01.08.2009

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (Вы еще не оценили)
Загрузка...

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

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

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