Отличная полезняшка, которая многим может пригодиться. Одними лишь средствами 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 и т.д.
спасибо, возьму на вооружение
Ответить
зачёт, только пропишите
#content a img {
чтобы все картинки блока не стали прозрачными.
Можно ещё подумать над тем, как выделить посещённые ссылки: фон, другая прозрачность и т.п.
Ответить
Да, поле для деятельности обширное :) На счет кода вы правы, нужно уточнять для какой именно картинки он используется. Просто для примера я не стал подробно расписывать.
Ответить
А что скажет дядя Валидатор?
+
Все равно спасибо, хорошая альтернатива яваскрипту.
Ответить
Ольга, валидатор облизнулся и попросил еще :)
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.websovet.com%2Fany%2Fprimerst%2Fprimerst.html&charset=%28detect+automatically%29&doctype=Inline&group=0
Ответить
Андрей 20.04.2011
@Игорь Квентор,
А вот css-validator ругается…
Сайт у вас интересный, все просто описывается и понятно.
Спасибо!
Ответить
Спасибо большое. Возьму на заметку, используя данные свойства можно даже не возиться с фотошопом и JS :) Не знал, что одним CSS можно такие вещи делать
Ответить
Помогите чайнику ) Этот код я так понимаю нужно в файле css прописать? А что же “в картинку” нужно вписать?
Заранее спасибо! )
Ответить
Дмитрий, в картинку ничего вписывать не нужно. Данный набор правил работает автоматом для всех картинок блока #content
Ответить
Игорь, одно только смущает, если при наведении на картинку, она подсвечивается, то мне как рядовому пользователю охото по ней кликнуть, а там пусто. Я часто сталкивался с такими эффектами на сайтах когда изображение вроде бы меняется и кажется ссылкой и охото по нему кликнуть, а в ответ тишина
Ответить
Рустам, все верно - данный эффект имеет смысл использовать лишь для картинок-ссылок.
Ответить
Имхо, на css такое удобное реализовать с помощью div{overflow:hidden} и div:hover{background: url() bottom}, предварительно сделав картинку из двух половинок.
Практически кроссбраузерное решение (если не брать во внимание :hover в IE6)
Правда в li такой способ у меня работать не хочет…
Ответить