Чииииикс!

Я вот что подумал, а не написать ли мне о свойстве прозрачности для 3-го CSS? Да, сейчас полетит куча реплик в мою сторону, что об этом свойстве все уже знают! Ха, а нет! Уверен, далеко не все.

На данный момент большинство последних версий современных браузеров уже поддерживают CSS 3 (!!!Даже IE 9!!!). Так что можно уже пробовать внедрять эти свойства в коды своих страниц.

И так, вернемся к свойству "opacity", которое дает интересный эффект, без вмешательства графики, всего-лишь прописав 1 строчку кода.

Что такое "opacity" в CSS 3?

"opacity" определяет прозрачность любого элемента на веб-страничке. То есть, задав определенный уровень прозрачности, мы сможем увидеть фоновый рисунок или другой элемент, который будет расположен под элементом, которому задана прозрачность. Удобно, не так ли?

У меня в блоге есть несколько элементов, которым прописано это свойство. Вы можете увидеть живой пример, когда опуститесь в самый низ сайдбара, там есть раздел "Друзья". Рисунок тускловат, правда? А теперь наведите курсор мышки на него. Стал более четче, не так ли?)

Сейчас расскажу поподробней, как это у меня реализовано.

Нам нужно задать прозрачность для элемента по умолчанию. То есть, элемент будет выглядеть немного тускловатый. Я поставил непрозрачность 70%. Но так, как все браузеры понимают код по-разному, нам нужно написать универсальный код.

Для Firefox, Opera, Chrome пишем:

opacity:X;

где "X" - значение в диапазоне от 0.0 (полная прозрачность элемента) до 1.0 (непрозрачность элемента).

Для Internet Explorer (поддерживает 8 и 9 версии):

filter:alpha(opacity=X);

где "X" - значение в диапазоне от 0 (полная прозрачность элемента) до 100 (непрозрачность элемента).

Далее это все совмещаем и присваиваем определенному классу:

.myimage {
opacity:0.7;
filter:alpha(opacity=70);
}

А теперь зададим правила для элемента, когда на него будет наведен курсор мыши. Нам нужно увидеть четкое отображение элемента и для этого я поставил 100% непрозрачность, то есть, элемент выглядит таким, каким он есть на самом деле:

.myimage:hover {
opacity:1.0;
filter:alpha(opacity=100);
}

Вот парочка примеров:

Прозрачность фотографии 100 (1.0), то есть нету прозрачности

Прозрачность фотографии 70 (0.7). Разноцветные круги - это "пробивается" картинка, которая расположена на фоне, т.е. под фотографией

Есть еще один пример. Опуститесь в самый низ страницы блога и в правом нижнем углу есть надпись "Up" и стрелочка вверх. Тут то же самое, рисунок и надпись тускловаты, но, при наведении курсора мышки, становятся более четкими.

Надеюсь, мой пост будет Вам полезен и когда-нить пригодится!

Stay in touch, guys!)