Transparentnost oznaka: neprozirnost CSS-a

Dizajn stranice i dijalog s posjetiteljem mogu se učinkovito provesti kroz učinak transparentnosti. Pravilo neprozirnosti CSS-a omogućuje postavljanje transparentnosti sadržaja oznaka od 0 do 1, tj. Od potpune transparentnosti do potpune neprozirnosti.

Kao opće pravilo, transparentnost je pravokutna. Ali ako koristite pravilo: pozadina-boja: transparentan, i oblik slike (na primjer, u obliku * .png), osim pravokutnog, onda možete postići gotovo bilo koji učinak.

Sintaksa pravila transparentnosti

Korištenje dizajna: neprozirnost: 0,4 - U opisu stila identifikatora ili klase, transparentnost oznake na koju se primjenjuju iznosi 40%. Vrijednost transparentnosti stila zapisana je od 0 do 1. Donja granica znači potpunu transparentnost, to jest, oznaka neće biti vidljiva, a gornja granica je ukupna neprozirnost, to jest neće biti vidljiva svemu ispod oznake.

Imajte na umu da pravilo neprozirnosti CSS-a djeluje i na pozadinu (boju, sliku) i na okvir i tekst u oznaci. Stoga, pri konstruiranju, posebno dijaloškog okvira, preporučljivo je podijeliti njegov supstrat od teksta na njemu (kreiranje različitih stilova za ove elemente) ili odabrati boje koje izgledaju dobro na ukupnoj pozadini stranice na odabranoj razini transparentnosti.

Vidljivost prozirnog elementa

Čak i ako je transparentnost nula, tj. Element nevidljiv, on je prisutan u prozoru preglednika i može generirati događaje.
U ovom slučaju, na slici s jagodom nalazi se oznaka u obliku kruga s leptirom, au njoj se nalazi oznaka s tekstom Click Me! prozirnostOznaka s leptirom je 0,5 a a tekst 1, tekst je potpuno netransparentan. Ako, primjerice, postavite rukovatelj događajima, kliknite na tekstnu oznaku, a koja razina transparentnosti ne bi bila u ovoj oznaci, klik na njegovoj lokaciji uvijek će raditi.

Primjena pravila transparentnosti

Logika primjene pravila transparentnosti u klasičnoj pozadini CSS-a, neprozirnost = 0,3-0,5: Prozor poruke ili dijalog pojavljuje se preko opće pozadine stranice samo skrivanjem i provođenjem dijaloga s posjetiteljima. Ta je praksa postala uobičajena pojava da se web-mjesto bez takve funkcionalnosti više ne smatra modernim.

U međuvremenu, u pravilima transparentnosti postoje i druga područja primjene. Prije svega, ova animacija: kako uz pomoć CSS pravila, tako i upravljani javascript. Prva opcija je najbolja, na primjer, promjenom prozirnosti CSS-a u okvirima @keyframes koji se koriste u CSS animacijskom pravilu, možete brzo i kvalitetno izvršiti animaciju gumba izbornika, logotipa tvrtke, bilo koje druge oznake na sadržaju web-mjesta.
Korištenje različitih razina transparentnosti u oznakama koje su nametnute jedna drugoj omogućit će vam stvaranje izvornih vizualnih efekata. Nažalost, transparentnost na uređajima koji ne podržavaju miša ne otkriva neke zanimljive vizualne ideje, ali ako koristite pravilo neprozirnosti CSS-a sa zakašnjenjem, tada gibanje prstiju na zaslonu pametnog telefona može biti animirano na najneočekivaniji način.

Povezane publikacije