Дизайнът на обекта и диалогът му с посетителя могат да бъдат ефективно осъществени чрез ефекта на прозрачност. Правилото за непрозрачност на CSS ви позволява да зададете прозрачност на съдържанието на маркера от 0 до 1, т.е. от пълна прозрачност до пълна непрозрачност.
Като общо правило прозрачността е правоъгълна. Но ако използвате правилото: фон-цвят: прозрачен, и формата на изображението (например, във формат * .png), различни от правоъгълни, тогава можете да постигнете почти всеки ефект.
Синтаксис на правила за прозрачност
Използване на дизайна: непрозрачност: 0.4 - При описанието на стила на идентификатора или класа, прозрачността на етикета, към който те се прилагат, е 40%. Стойността на прозрачността на стила се записва от 0 до 1. Долната граница означава пълна прозрачност, т.е. тагът няма да се вижда, а горната граница е общата непрозрачност, т.е. няма да се вижда от всичко под маркер.
Забележете, че правилото за непрозрачност на CSS действа както върху фона (цвят, изображение), така и върху рамката и текста в маркера. Следователно, когато се изгражда диалогов прозорец, препоръчително е да се раздели субстратът му от текста върху него (създаване на различни стилове за тези елементи) или да се изберат цветовете, които изглеждат добре на цялостния фон на страницата на избраното ниво на прозрачност.
Видимост на прозрачен елемент
Дори ако прозрачността е нула, т.е. елементът е невидим, той присъства в прозореца на браузъра и може да генерира събития.
В този случай на снимка с ягода се поставя етикет под формата на кръг с пеперуда и в него има етикет с текста Click Me! прозрачностЕтикетът с пеперудата е 0.5 a, а текстът е 1, съответно текстът е напълно непрозрачен. Ако зададете манипулатор на събития, например, върху кликване в текстов маркер, тогава кое ниво на прозрачност няма да бъде в този маркер, кликване на неговото местоположение винаги ще работи.
Прилагане на правилото за прозрачност
Логиката на прилагането на правилото за прозрачност в класическия фон на CSS, непрозрачност = 0.3-0.5: Прозорецът за съобщения или диалоговия прозорец се появява върху общия фон на страницата само като го скрива и провежда диалог за посетители. Тази практика е станала обичайна практика, че сайт без такава функционалност вече не се счита за модерен.
Междувременно в правилата за прозрачност съществуват и други области на приложение. На първо място, тази анимация: както с помощта на CSS правила, така и с управляван javascript. Първата опция е най-добрата, например, като промените непрозрачността на CSS в кадрите @keyframes, използвани в правилото за CSS анимация, можете бързо и качествено да изпълните анимацията на бутоните от менюто, логото на компанията, всеки друг маркер върху съдържанието на сайта.
Използването на различни нива на прозрачност в етикетите, наложени един на друг, ще ви позволи да създавате оригинални визуални ефекти. За съжаление, прозрачността на устройствата, които не поддържат мишката, не разкрива някои интересни визуални идеи, но ако използвате правилото за непрозрачност на CSS със закъснение, тогава движението на пръстите на екрана на смартфона може да бъде анимирано по най-неочакван начин.
