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