Чииииикс!
Я вот что подумал, а не написать ли мне о свойстве прозрачности для 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!)
Спасибо за толчек! А то я уже и подзабыл про прозрачность… заждался пока все придут к CSS 3.0
Всегда пожалуйста!
Я думаю все еще долго будут к этому идти и приспосабливаться ))))
Спасибо за статейку!
Не знаю как с прозрачностью, а вот CSS3 с закруглёнными углами ещё много кто не дружет. Даже Опера, только в 10.5 версии это добавила его поддержку.
Так что думаю c CSS3 ещё много времени пройдёт, прежде чем W3C снимет клеймо “under development”.
Кстати да, я был удивлен, когда увидел, что Опера не поддерживает круглые углы в 3 CSS
В 10.5 еще не проверял))
аха…все круто ток пол мира еще висят на старых ИЕ
Выход разве что в двойной цсске (для старых и новых браузеров) Геморно,но увы…
И ваще этот напряг с разнообразностью браузеров и тем что они не по единому стандарту построены так ваще полный капец. Зачем мучать то так нас, а?
Чтобы жилось нам не просто))) Надеюсь за несколько лет большинство уже перейдет на 8/9 Ослик)))
а как сделать полупрозрачным паттерн эээ поле на котором текст для ЖЖ оставив бекграунд картинкой
Я немного не понял Ваш вопрос
Опишите, плз, более понятнее
Корисна інфа, беру непрозорість на озброєння
Спасибо за урок! Обязательно как-нибудь использую это на своем сайте.