Прозорість тегів: 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, так і керована jаvascript. Перший варіант кращий, наприклад, змінюючи CSS opacity в кадрах @keyframes, використовуваних у правилі CSS animation, можна швидко і якісно виконати анімацію кнопки меню, логотипу компанії, будь-якого іншого тега за змістом контенту сайту. Використання різних рівнів прозорості в тегах, накладених один на одного, дозволить створити оригінальні візуальні ефекти. На жаль, прозорість на пристроях, що не підтримують миша, не дозволяє розкрити деякі цікаві візуальні ідеї, але якщо використовувати правило CSS opacity з затримкою, то рух пальців на екрані смартфона, наприклад, можна оживити самим несподіваним чином.