Транспарентност ознака: правило непрозирности ЦСС-а

Дизајн сајта и његов дијалог са посетиоцем могу се ефикасно извршити коришћењем ефекта транспарентности. Правило непрозирности ЦСС-а пружа могућност постављања транспарентности садржаја ознака од 0 до 1, односно од потпуне транспарентности до потпуне непрозирности.

Као опште правило, транспарентност је правоугаоног облика. Али ако користите правило: бацкгроунд-цолор: транспарентан, и облик слике (на пример, у формату * .пнг), који је различит од правоугаоног, онда можете постићи скоро сваки ефекат.

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

Коришћење конструкције: непрозирност: 0.4 - у опису стила или класе идентификатора чини транспарентност ознаке на коју се примењују, 40%. Вредност транспарентности стила се пише бројем од 0 до 1. Доња граница означава потпуну транспарентност, тј. Ознака неће бити видљива, а горња граница је пуна непрозирност, тј. Све што је испод ознаке неће бити видљиво.

Имајте на уму да правило непрозирности ЦСС-а утиче и на позадину (боју, слику) и оквир и текст у ознаци. Због дизајнирања, нарочито, оквир за дијалог Препоручљиво је одвојити позадину од текста на њему (креирање различитих стилова за ове елементе) или одабрати боје које изгледају добро у односу на општу позадину странице на одабраном нивоу транспарентности.

Транспарентна видљивост елемента

Чак и ако је транспарентност нула, то јест, елемент је невидљив, он је присутан у прозору претраживача и може генерирати догађаје.

У овом случају, ознака са јагодом има ознаку у облику круга са лептиром, ау њој је ознака са текстом Цлицк Ме! Транспарентност ознаке са лептиром је 0.5, а са текстом - 1, текст је потпуно непрозиран.

Ако у текстуалној ознаци коју сте поставили руковалац догађаја, на пример, онцлицк, онда без обзира на ниво транспарентности коју овај таг има, клик на његову локацију ће увек радити.

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

Логика примене правила транспарентности у класичној ЦСС позадини, непрозирност = 0.3 - 0.5: порука или прозор за дијалог се појављује изнад опште позадине странице, само је покрива и води дијалог са посетиоцем. Ова пракса је већ постала уобичајена, да се сајт без ове функционалности више не сматра модерним.

У међувремену, правило транспарентности има и друге сврхе. Пре свега, то је анимација: и преко ЦСС правила, и преко ЈаваСцрипт кода. Прва опција је пожељнија, на пример, променом непрозирности ЦСС-а у оквирима @кеифрамес који се користе у ЦСС анимационом правилу, можете брзо и ефикасно анимирати дугме менија, лого компаније, било коју другу ознаку у смислу садржаја сајта.

Користећи различите нивое транспарентности у ознакама које се надовезују једна на другу, моћи ћете да креирате оригиналне визуелне ефекте. Нажалост, транспарентност на уређајима који не подржавају миша не дозвољава да се открију неке занимљиве визуелне идеје, али ако користите одложено правило непрозирности ЦСС-а, онда померање прстију на екрану паметног телефона, на пример, може бити анимирано на неочекиване начине.