Прозрачность средствами CSS. Эффект затемнения на сайте

Прозрачность средствами CSS позволяет создавать очень интересные эффекты тусклых или полупрозрачных картинок, баннеров, счетчиков посещений и воообще любых элементов сайта. При наведении курсора на такой элемент картинка или баннер приобретает нормальную четкость, яркость и цвет. Такой CSS эффект представлен на рисунке ниже (наведите курсор на картинку) и в подвале этого сайта для затемнения счетчиков посещений.

Наведите курсор на картинку

CSS эффекты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.

Экспериментируя со значением этих свойств, можно получить различные степени прозрачности элемента веб-страницы.