Css transparentnost objekta jednostavan je način da dizajn web stranice postaje zanimljiviji

Danas stvaranje web dizajna postaje prava umjetnost. To nije samo skup elemenata stranice određene boje i veličina, fontovi različitih stilova i tematskih crteža. Kako bi se web lokacija razlikovala od drugih, privukla pažnju posjetitelja i usmjerila ih na te ili druge elemente, koristi se veliki broj metoda i alata. Među njima postoji vrlo popularna nekretnina css - transparentnost. Ova tehnika je prilično moderna i učinkovita, pa se često koristi. Primjerice, možete dati transparentnost različitim objektima na stranici stranice - tekst, cijeli blok ili slika. Također se postiže na mnogo načina. Razmotrimo ih u nastavku.

Parametri za definiranje transparentnosti elemenata

Parametri koji omogućuju reguliranje stupnja transparentnosti elemenata su nekoliko. Koriste se ovisno o određenim ciljevima, kao i pregledniku, pod kojim je dizajn "prilagođen". To uključuje sljedeća svojstva:

• Prozirnost;
• filtriranje;
• PNG sliku kao pozadinu.

Vrijednosti css "transparentnosti" mijenjaju se kako slijedi: što je veća znamenka, to je niža razina transparentnosti elementa. U neprozirnosti varira od 0 do 1, u filtru - od 10 do 100. I potonji se koristi za Interet Explorer preglednika, a za sve ostale koristi se svojstva neprozirnosti.

Transparentnost slike (promjena)

Počnimo s opcijom, kada se transparentnost pojavi kada pokazivač miša iznad elementa pokazivač miša.

Razmotrite kako postaviti transparentnost slike. CSS nudi dvije mogućnosti. Zbog toga je potrebno upisati ga izravno u kod HTML dokumenta kako slijedi:

1. Navedite put do slike.
2. Odredite postavke transparentnosti kada lebde iznad pokazivača i ne. Da bismo to učinili, koristimo svojstva onmouseover i onmouseout u kojima smo postavili vrijednosti neprozirnosti i filtra.

Te iste značajke mogu biti napisane u css dokumentu, a kod izvornog koda dodajte samo vezu na nju. Rezultati su isti.

Prozirnost teksta i blokova stranica

Što se tiče teksta ili bloka (širina transparentnosti), css predlaže upotrebu opcije slične stvaranju transparentnosti slike, tj. Korištenjem povezane css datoteke u kojoj će se postaviti željeni parametri. Možete ići na jednostavan način. Prilikom određivanja stilova blokova stila div ili p teksta, propisujte sljedeći HTML kod za elemente onmouseover i onmouseout. Oba opcija rade i daju željeni rezultat.

Transparentna konstanta

U nekim slučajevima transparentnost nekog objekta, elementa dizajna ili teksta mora biti određena trajno. U takvoj situaciji, rješenje je još lakše nego kada držite pokazivač miša.

Za element css, transparentnost se daje sljedećim kodom. U bloku divnog stila dodjeljujemo vrijednosti za pozadinu (npr. # Ff8800), neprozirnost (npr., 0,5), kao i širina i padding.

Za sliku u kodu unosimo vrijednosti neprozirnosti i filtra, a također navodimo put do slike.

RGBA metoda

Postoje i druge mogućnosti za korištenje ovog svojstva css: transparentnost se može primijeniti na boju pozadine bilo kojeg elementa dizajna. Za to se koristi RGBA metoda. Prva tri slova označavaju primarne boje (crvena, čvrsta, plava), a posljednja - alfa, koja određuje razinu transparentnosti. Koristeći RGBA formatu, odredite stupanj transparentnosti, označavajući ga u posljednjoj znamenci. Na primjer, ovo je slučaj: pozadina: rgba (240,2,33,0,4035).

zaključak

Stoga pomoću jednostavnog, ali učinkovitog svojstva "transparentnosti" tijekom rada na dizajnu web-mjesta, elemente možete učiniti zanimljivijima i vidljivijima, uz minimalan napor. Opisane opcije za određivanje karakteristika transparentnosti pomoći će vam u tome.