Transparentnost oznaka: pravilo prozirnosti CSS-a

Dizajn stranice i dijalog s posjetiteljem mogu se učinkovito provesti pomoću učinka transparentnosti. Pravilo neprozirnosti CSS-a pruža mogućnost postavljanja transparentnosti sadržaja oznake od 0 do 1, odnosno od potpune transparentnosti do potpune neprozirnosti.

Kao opće pravilo, transparentnost je pravokutna. Ali ako koristite pravilo: pozadinska boja: transparentna, i oblik slike (na primjer, u obliku * .png), koji se razlikuje od pravokutnog, tada možete postići gotovo bilo kakav učinak.

Sintaksa pravila transparentnosti

Korištenje konstrukcije: neprozirnost: 0,4 - u opisu stila ili klase identifikatora čini transparentnost oznake na koju se primjenjuju, 40%. Vrijednost transparentnosti stila piše se brojem od 0 do 1. Donja granica označava potpunu transparentnost, tj. Oznaka neće biti vidljiva, a gornja granica je puna neprozirnost, tj. Sve što je pod oznakom neće biti vidljivo.

Napominjemo da pravilo neprozirnosti CSS-a utječe na pozadinu (boju, sliku) i okvir i tekst u oznaci. Zbog dizajniranja, osobito, dijaloški okvir Preporučljivo je odvojiti pozadinu od teksta na njemu (kreiranje različitih stilova za te elemente) ili odabrati boje koje izgledaju dobro na općoj pozadini stranice na odabranoj razini transparentnosti.

Transparentna vidljivost elemenata

Čak i ako je transparentnost nula, to jest, element je nevidljiv, on je prisutan u prozoru preglednika i može generirati događaje.

U ovom slučaju, na slici s jagodama, oznaka je postavljena u obliku kruga s leptirom, au njemu je oznaka s tekstom Click Me! Prozirnost oznake s leptirom je 0,5, a tekstom 1, tekst je potpuno neproziran.

Ako u tekstualnoj oznaci koju postavite rukovatelj događajima, na primjer, onclick, onda bez obzira na razinu transparentnosti koju ova oznaka ima, klik na njezino mjesto uvijek će raditi.

Primjena pravila transparentnosti

Logika primjene pravila transparentnosti u klasičnoj CSS pozadini, neprozirnost = 0,3 - 0,5: pojavljuje se poruka ili dijaloški prozor iznad opće pozadine stranice, samo ga pokriva i vodi dijalog s posjetiteljem. Ta je praksa već postala uobičajena, a da se web-lokacija bez te funkcionalnosti više ne smatra modernom.

U međuvremenu, pravilo transparentnosti ima i druge namjene. Prije svega to je animacija: i kroz CSS pravila, i pod kontrolom JavaScript koda. Prva opcija je poželjnija, na primjer, promjenom neprozirnosti CSS-a u okvirima @keyframes korištenih u pravilu CSS animacije, možete brzo i učinkovito animirati gumb izbornika, logotip tvrtke, bilo koju drugu oznaku u smislu sadržaja web-mjesta.

Korištenjem različitih razina transparentnosti u oznakama koje se nadovezuju jedna na drugu, omogućit ćete stvaranje izvornih vizualnih efekata. Nažalost, transparentnost na uređajima koji ne podržavaju miša ne dopušta otkrivanje nekih zanimljivih vizualnih ideja, ali ako koristite zakašnjelo pravilo neprozirnosti CSS-a, onda se pokret prstom na zaslonu pametnog telefona može animirati na neočekivane načine.