n-wp.ru — блог о WordPress

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

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

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

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

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

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

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

tiaurus

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

Комментировать