ЦСС транспарентност и њена примена за различите елементе

Елементи за обликовање на вашем сајту, без сумње, могу се назвати једним од најважнијих задатака са којима се суочава веб-мастер. Овде, као у животу, упознајте се на одећи. Јединствен стил, лепота и истовремено једноставан и интуитиван дизајн не само да ће помоћи да се направи први утисак, већ и привуче нове читаоце, купце или купце, у зависности од правца кретања сајта.

Транспарентност садржаја

Креирање средстава ЦСС-транспарентности садржаја, за почетак вреди схватити како је потребно прописати сам образац. Наравно, у овом материјалу неће бити удубљења у стандардним ознакама за програмирање странице сајта уопште. Илустративан пример, фокусираћемо се на правоугаоно подручје, обојено монотоно испуњење. Да бисте је приказали, потребно је да креирате једноставну ЦСС стилску датотеку са накнадним везивањем или да поставите код директно на страницу ХТМЛ документа. Након што сте прописали потребне висине, ширину, боју и параметре контуре правоугаоног блока, морате додати код стилу који вам омогућава да направите ЦСС објекат транспарентним. Параметар “непрозирност: 0.Кс” је одговоран за ово, јер је то ниво видљивости. Што је његова вредност ближа једној, објекат постаје невидљив. Овај стил ће исправно радити у претраживачима са подршком за ЦСС3. Готово сви модерни веб претраживачи сада имају такве инструкције.

Повећајте универзалност кодова

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

За Интернет Екплорер верзије 5.5 и више, перципирани код је веома дуга и ружна линија - “филтер: прогид: ДКСИмагеТрансформ.Мицрософт.Алпха (непрозирност = Кс)”, где параметар транспарентности треба да буде наведен не у деловима један, већ у стотинама. Његова максимална вредност, на којој је транспарентност боје ЦСС објекта пуна, је 100.

За мање популарне претраживаче постоји властити код. Један од њих је Конкуерор, познатији корисницима КДЕ десктопа на УНИКС системима. За то вам је потребно да подесите ЦСС транспарентност са параметром “-кхтмл-опацити: 0.Кс”.

За потпуно поверење у оптимизацију кода, можете додати линију која пружа подршку за једну од првих верзија Мозилла претраживача: “-моз-опацити: 0.Кс”.

Извршавањем ове оптимизације, вебмастер може постићи исправан приказ њиховог садржаја на већини корисничких уређаја.

Ховер ацтивити

Пошто се ЦСС транспарентност најчешће користи као дизајн за елементе са хиперлинковима, лебдећа активност постаје један од примарних задатака. Као пример, размотрите исти правоугаоник. Претпоставимо да је неопходно да када лебдите на блоку, транспарентност промени од 0 до вредности 0.5. Да би се добила таква прилика, бит ће потребно додати већ постојећи стил одговоран за транспарентност под додатним Параметар Ховер цсс Ова особина се такође користи за додавање ефеката као што су промена боје и облика објеката током лебдења. То вам омогућава да визуелно активирате потребна подручја, привлачећи пажњу посетилаца на линкове или садржај.

Апликација за слике

У случају да је горе описани процес јасан, додавање транспарентности сликама са ЦСС-ом ће бити лако. Није потребно чак ни мијењати сам стилски код. Може се оставити непромењено. Мораћете да радите само са распоредом слика у самом хтмл-документу. Ако је у претходним случајевима за уметање елемента кориштен таг «див», овдје их треба замијенити «имг», прикладним за ову врсту садржаја. Стил за слике је исти као и за блокове. Наравно, применом ЦСС-а описаног на почетку чланка, мораћете да промените параметре висине, ширине и ивица за хармоничан изглед уметнуте слике.

Транспарентност текста и позадине

Пример текста је сличан уметању слика. Креирајте транспарентност у ЦСС-у одвојено такође није потребно. У овом случају, бит ће потребно замијенити ознаке ознакама које се користе за распоред текстуалних поља. То су "п" и "спан".

Када се текст пише у телу ХТМЛ документа без употребе посебних ознака, додавање транспарентности ће бити веома тешко и дуготрајно. Стога, ова опција нема смисла разматрати.

У случају да је веб страница потребна да би позадина била транспарентна, ЦСС би био најбоља опција овдје. Пошто је позадина у суштини иста слика или форма, потребно је само да приложите наш стил у главном коду веб ресурса.