Transparentnost oznak: pravilo motnosti CSS

Oblikovanje spletnega mesta in njegov dialog z obiskovalcem je mogoče učinkovito izvajati z učinkom preglednosti. Pravilo o motnosti CSS omogoča nastavitev preglednosti vsebine oznak od 0 do 1, torej od popolne preglednosti do polne motnosti.

Preglednost je praviloma pravokotna. Toda, če uporabljate pravilo: ozadje-barva: transparentno, in obliko slike (na primer v obliki * .png), ki je drugačna od pravokotne, lahko dosežete skoraj vsak učinek.

Sintaksa pravila preglednosti

Z uporabo konstrukcije: motnost: 0,4 - v opisu sloga ali razreda identifikatorja je preglednost oznake, na katero se nanašajo, 40%. Vrednost transparentnosti sloga se zapiše s številko od 0 do 1. Spodnja meja pomeni popolno preglednost, kar pomeni, da oznaka ne bo vidna, zgornja meja pa je polna motnost, kar pomeni, da vse, kar je pod oznako, ne bo vidno.

Upoštevajte, da pravilo motnosti CSS vpliva na ozadje (barvo, sliko) in okvir ter besedilo v oznaki. Ker je zlasti oblikovanje, pogovorno okno Priporočljivo je, da ločite njegovo ozadje od besedila na njem (ustvarjanje različnih stilov za te elemente) ali izberete barve, ki na izbrani ravni preglednosti dobro izgledajo glede na splošno ozadje strani.

Preglednost vidnega elementa

Tudi če je preglednost nič, to pomeni, da je element neviden, je prisoten v oknu brskalnika in lahko generira dogodke.

V tem primeru ima oznaka z jagodo oznako v obliki kroga z metuljem, v njej pa je oznaka z besedilom Click Me! Prosojnost oznake z metuljem je 0,5, pri besedilu - 1 pa je besedilo popolnoma neprosojno.

Če v besedilni oznaki, ki jo nastavljate, na primer na onclick, potem ne glede na raven preglednosti, ki jo ima ta oznaka, klik na njegovo mesto vedno deluje.

Uporaba načela preglednosti

Logika uporabe pravila preglednosti v klasičnem CSS ozadju kakovosti, motnost = 0,3 - 0,5: sporočilo ali pogovorno okno se pojavi nad splošnim ozadjem strani, le da ga pokriva in vodi dialog z obiskovalcem. Ta praksa je že postala običajna, da spletno mesto brez te funkcionalnosti ni več sodobno.

Medtem pa ima pravilo preglednosti tudi druge namene. Najprej je to animacija: tako s pravili CSS, kot tudi s JavaScript kodo. Prva možnost je primernejša, na primer s spreminjanjem motnosti CSS v okvirih @keyframes, ki se uporabljajo v pravilu CSS animacije, lahko hitro in učinkovito animirate gumb menija, logotip podjetja, katero koli drugo oznako v smislu vsebine spletnega mesta.

Uporaba različnih stopenj preglednosti v oznakah, ki so nameščene drug na drugega, vam omogoča ustvarjanje izvirnih vizualnih učinkov. Na žalost preglednost na napravah, ki ne podpirajo miške, ne omogoča razkrivanja nekaterih zanimivih vizualnih idej, če pa uporabite zakasnjeno pravilo motnosti CSS, se lahko gibanje prstov na zaslonu pametnega telefona animira tudi na nepričakovane načine.