Прозрачность в CSS3

27
Янв
2010

Прозрачность в CSS 3 / Opacity in CSS3

Чииииикс! :)

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

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

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

Demo opacity CSS3

Что такое "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), то есть нету прозрачности

Прозрачность в CSS 3

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

Opacity in CSS 3

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

Download (скачать) opacity CSS3

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

Stay in touch, guys!)

Подписаться на RSSВы можете подписаться на RSS или на E-mail рассылку:

Оставить комментарий с помощью формы ВКонтакте

Комментариев (10) к “Прозрачность в CSS3”

  1. BUSHA пишет:

    Спасибо за толчек! А то я уже и подзабыл про прозрачность… заждался пока все придут к CSS 3.0 :-D

  2. Роман пишет:

    Спасибо за статейку! =)

    Не знаю как с прозрачностью, а вот CSS3 с закруглёнными углами ещё много кто не дружет. Даже Опера, только в 10.5 версии это добавила его поддержку.

    Так что думаю c CSS3 ещё много времени пройдёт, прежде чем W3C снимет клеймо “under development”.

    • Oleg Mykhailenko пишет:

      Кстати да, я был удивлен, когда увидел, что Опера не поддерживает круглые углы в 3 CSS %) В 10.5 еще не проверял))

  3. galaxy пишет:

    аха…все круто ток пол мира еще висят на старых ИЕ :)
    Выход разве что в двойной цсске (для старых и новых браузеров) Геморно,но увы…
    И ваще этот напряг с разнообразностью браузеров и тем что они не по единому стандарту построены так ваще полный капец. Зачем мучать то так нас, а? :D

  4. Оля пишет:

    а как сделать полупрозрачным паттерн эээ поле на котором текст для ЖЖ оставив бекграунд картинкой

  5. Igo пишет:

    Корисна інфа, беру непрозорість на озброєння 8) =)

  6. Юрий пишет:

    Спасибо за урок! Обязательно как-нибудь использую это на своем сайте.