Прозрачность тегов: правило CSS opacity

Дизайн сайта и его диалог с посетителем эффективно можно выполнить при помощи эффекта прозрачности. Правило CSS opacity предоставляет возможность установить прозрачность содержимого тега от 0 до 1, то есть от полной прозрачности до полной непрозрачности.

По общему правилу, прозрачность носит прямоугольный характер. Но если использовать правило: background-color: transparent, и форму изображения (например, в формате *.png), отличную от прямоугольной, то можно достигнуть практически любого эффекта.

Синтаксис правила прозрачности

Использование конструкции: opacity: 0.4 - в описании стиля идентификатора или класса делает прозрачность тега, к которому они применены, 40 %. Значение прозрачности стиля записывается цифрой от 0 до 1. Нижняя граница означает полную прозрачность, то есть тега видно не будет, а верхняя граница - полная непрозрачность, то есть не будет видно всего, что под тегом.

Следует учитывать, что правило CSS opacity действует как на фон (цвет, изображение), так и на рамку и текст в теге. Потому конструируя, в частности, диалоговое окно, целесообразно разделять его подложку от текста на ней (создавая различные стили для этих элементов) или выбирать такие цвета, которые хорошо выглядят на общем фоне страницы при выбранном уровне прозрачности.

Видимость прозрачного элемента

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

В данном случае на картинке с земляникой помещен тег в виде окружности с бабочкой, а в нем - тег с текстом Click Me! Прозрачность тега с бабочкой равна 0.5, а с текстом - 1, соответственно, текст полностью непрозрачен.

Если же в теге текста установить обработчик на событие, например, onclick, то какой бы уровень прозрачности ни был у этого тега, клик на месте его нахождения всегда сработает.

Применение правила прозрачности

Логика применения правила прозрачности в классическом качестве CSS background, opacity = 0.3 - 0.5: окошко сообщения или диалога выскакивает над общим фоном страницы, лишь прикрывая его, и ведет диалог с посетителем. Эта практика уже стала привычной, что сайт без таким образом оформленной функциональности уже не считается современным.

Между тем у правила прозрачности есть и другие области применения. В первую очередь это анимация: как посредством правил CSS, так и управляемая кодом JavaScript. Первый вариант предпочтителен, например, меняя CSS opacity в кадрах @keyframes, используемых в правиле CSS animation, можно быстро и качественно выполнить анимацию кнопки меню, логотипа компании, любого другого тега по смыслу контента сайта.

Использование различных уровней прозрачности в тегах, наложенных друг на друга, позволит создать оригинальные визуальные эффекты. К сожалению, прозрачность на устройствах, не поддерживающих мышь, не позволяет раскрыть некоторые интересные визуальные идеи, но если использовать правило CSS opacity с задержкой, то движение пальцев на экране смартфона, например, можно также оживить самым неожиданным образом.