Многие дизайнеры любят использовать полупрозрачные элементы, особенно если они перекрывают основное содержимое. Полупрозрачность может помочь привлечь внимание к элементу при его активации (например, при подведении курсора к картинке, баннеру или кнопке). Давайте посмотрим, как делается полупрозрачный элемент.
Для начала напишем правило, делающее элемент 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:
<div class="banner"> код баннера </div>
Я же сказал, что ничего сложного писать не буду :)
