Прозрачность средствами CSS. Эффект затемнения на сайте
Прозрачность средствами CSS позволяет создавать очень интересные эффекты тусклых или полупрозрачных картинок, баннеров, счетчиков посещений и воообще любых элементов сайта. При наведении курсора на такой элемент картинка или баннер приобретает нормальную четкость, яркость и цвет. Такой CSS эффект представлен на рисунке ниже (наведите курсор на картинку) и в подвале этого сайта для затемнения счетчиков посещений.
Наведите курсор на картинку
Скачать этот пример эффекта прозрачности / затемнения в CSS
Прозрачность в CSS реализуется достаточно просто.
Для данного примера в стиль CSS добавлен следующий код
#prozrachnost a img {
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
}
#prozrachnost a:hover img {
opacity:1.0; -moz-opacity:1.0;
filter:alpha(opacity=100);
}
После этого код элемента сайта (картинку, счетчик...) надо вставить внутрь следующего блока:
<div id="prozrachnost">Код элемента сайта - например, картинки</div>
Рассмотрим свойства стилей, благодаря которому достигается данный эффект:
opacity: значение; - задает уровень прозрачности элемента сайта.
Значение изменяется в диапазоне от 0.0 до 1.0. Значение 0.0 определяет полную прозрачность (элемент не будет виден), 1 - полную непрозразность. Дробное значение, например 0.5 создает частичную непрозрачность, можно записать так .5 (т.е. опустить 0 и начать запись с точки).
-moz-opacity: значение от 0.0 до 1.0; - свойство -moz-opacity прописывается для Mozilla 1.6 и ниже.
filter:alpha(opacity=значение от 0 до 100); - необходимо для работы в IE.
Экспериментируя со значением этих свойств, можно получить различные степени прозрачности элемента веб-страницы.