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

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

Като общо правило прозрачността е правоъгълна. Но ако използвате правилото: фонов цвят: прозрачен, и формата на изображението (например във формат * .png), който е различен от правоъгълния, можете да постигнете почти всеки ефект.

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

Използването на конструкцията: непрозрачност: 0.4 - в описанието на стила на идентификатора или класа прави прозрачността на етикета, към който те се прилагат, 40%. Стойността на прозрачността на стила се записва с число от 0 до 1. Долната граница означава пълна прозрачност, т.е. тагът няма да се вижда, а горната граница е пълна непрозрачност, т.е. всичко, което е под маркер, няма да се вижда.

Обърнете внимание, че правилото за непрозрачност на CSS засяга както фона (цвят, изображение), така и рамката и текста в маркера. Тъй като, по-специално, диалогов прозорец препоръчително е да се раздели неговия фон от текста на него (създаване на различни стилове за тези елементи) или да се изберат цветове, които изглеждат добре на фона на страницата на избраното ниво на прозрачност.

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

Дори ако прозрачността е нула, т.е. елементът е невидим, той присъства в прозореца на браузъра и може да генерира събития.

В този случай, на снимката с ягоди, етикет се поставя под формата на кръг с пеперуда, а в него се поставя етикет с текста Click Me! Прозрачността на етикета с пеперудата е 0.5, а с текста - съответно, текстът е напълно непрозрачен.

Ако в текстовия етикет, който сте задали манипулатор на събития, например onclick, тогава без значение какво ниво на прозрачност има този етикет, кликване върху неговото местоположение винаги ще работи.

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

Логиката на прилагане на правилото за прозрачност в класическия CSS фон, непрозрачността = 0.3 - 0.5: съобщение или диалогов прозорец изскача над общия фон на страницата, само го покрива и води диалог с посетителя. Тази практика вече е станала обичайна, че сайт без тази функционалност вече не се счита за модерен.

Междувременно правилото за прозрачност има и други приложения. Преди всичко това е анимация: както чрез CSS правила, така и чрез JavaScript код. Първата опция е за предпочитане, например, чрез промяна на непрозрачността на CSS в кадрите @keyframes, използвани в правилото за CSS анимация, можете бързо и ефективно да анимирате бутона на менюто, фирменото лого, всеки друг маркер по смисъла на съдържанието на сайта.

Използването на различни нива на прозрачност в таговете, насложени един върху друг, ще ви позволи да създавате оригинални визуални ефекти. За съжаление, прозрачността на устройствата, които не поддържат мишката, не позволява да се разкрият някои интересни визуални идеи, но ако използвате забавеното правило за непрозрачност на CSS, тогава движението на пръстите върху екрана на смартфона може също да бъде анимирано по неочакван начин.