Несколько примеров работы с CSS: прозрачность

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

Для начала напишем правило, делающее элемент DIV полупрозрачным (видимость 85%), которое будет работать во всех браузерах, поддерживающих CSS3:

div {
opacity:0.85;
}

Все хорошо, но есть одна загвоздка – многие все еще пользуются устаревшими браузерами, не поддерживающими современные стандарты. Я говорю о пользователях Internet Explorer 6,7,8. Чтобы они не чувствовали себя ущербными, добавим для них дополнительные правила:

div {
opacity:0.85; /* работает в Mozilla Firefox, Google Chrome, Opera и Safari */
filter: alpha(opacity=85); /* работает в Internet Explorer 5,6,7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; /* работает в Internet Explorer 8 */
}

Как это применить на практике? Сделаем, например, полупрозрачный баннер, который становится видным полностью при подведении к нему курсора. Для этого создадим класс banner, и зададим два правила, оформляющие его вид:

/* видимость 85% */
.banner {
opacity:0.85;
filter: alpha(opacity=85);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
}
/* видимость 100% */
.banner:hover {
opacity:1.00;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

Теперь осталось только заключить баннер в элемент с классом banner:


Я же сказал, что ничего сложного писать не буду :)

Автор tiaurus 2182 Articles
Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*