Чииииикс!
Я вот что подумал, а не написать ли мне о свойстве прозрачности для 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); }
Вот парочка примеров:
Прозрачность фотографии
