Proprietatea css `transparența `este o modalitate ușoară de a face designul site-ului mai interesant

Astăzi, crearea unui design de site web devine o adevărată artă. Nu este doar un set de elemente de pagină de o anumită culoare și dimensiune, fonturi stiluri diferite și desene tematice. Pentru a face site-ul diferit de alții, pentru a atrage atenția vizitatorilor și a-l îndruma către aceste sau alte elemente, se utilizează un număr mare de metode și instrumente. Printre ei există o css de proprietate foarte populară - transparență. Această tehnică este mai degrabă la modă și eficientă și, prin urmare, este folosită frecvent. Puteți oferi transparență diferitelor obiecte de pe pagina site-ului - text, bloc întreg sau imagine, de exemplu. De asemenea, este realizat în multe feluri. Să le analizăm mai jos.

Parametrii pentru definirea transparenței elementelor

Parametrii care permit reglarea gradului de transparență a elementelor sunt mai multe. Acestea sunt utilizate în funcție de scopuri specifice, precum și de browserul în care designul este "ajustat". Acestea includ următoarele proprietăți:

• opacitate;
• se filtrează;
• Imaginea PNG ca fundal.

Valorile proprietății css "transparență" se modifică după cum urmează: cu cât este mai mare cifra, cu atât nivelul de transparență al elementului este mai mic. În opacitate, acesta variază de la 0 la 1, în filtru - de la 10 la 100. Și acesta din urmă este utilizat pentru browserul Interet Explorer, iar pentru toate celelalte, se folosește proprietatea de opacitate.

Transparența imaginii (schimbare)

Să începem cu opțiunea când transparența va apărea atunci când plasați cursorul peste un element cursorul mouse-ului.

Luați în considerare modul de setare a transparenței unei imagini. CSS oferă două opțiuni. Pentru aceasta, este necesar să-l scrieți direct în codul html-document după cum urmează:

1. Specificați calea spre imagine.
2. Determinați setările de transparență când plasați cursorul peste cursor și nu. Pentru aceasta, folosim proprietățile onmouseover și onmouseout, în care setăm valorile opacității și ale filtrului.

Aceleași caracteristici pot fi scrise în documentul css, iar în codul sursă se adaugă doar un link la acesta. Rezultatele sunt aceleași.

Transparența textului și a blocurilor de pagini

În ceea ce privește textul sau blocul (div div), css sugerează utilizarea unei opțiuni asemănătoare creării unei transparențe a imaginii, adică utilizând un fișier css conectat în care vor fi setați parametrii doriți. Puteți merge într-un mod mai simplu. Când specificați stilurile blocului de stil div sau textul p, prescrieți următorul cod html pentru elementele onmouseover și onmouseout. Ambele opțiuni funcționează și dau rezultatul dorit.

Constanta de transparenta

În unele cazuri, transparența unui obiect, a unui element de proiectare sau a unui text trebuie specificată în mod continuu. În această situație, soluția este chiar mai ușoară decât atunci când plasați cursorul pe cursorul mouse-ului.

Pentru elementul css, transparența este dată de următorul cod. În blocul de div div, atribuim valori pentru fundal (de exemplu, # ff8800), opacitate (de exemplu, 0,5), precum și lățimea și umplutura.

Pentru imaginea din cod, introducem valorile opacității și filtrului și specificăm și calea spre imagine.

Metoda RGBA

Există și alte opțiuni pentru utilizarea acestei proprietăți css: transparența poate fi aplicată culorii de fundal a oricărui element de design. Pentru aceasta, se folosește metoda RGBA. Primele trei litere indică culorile primare (roșu, solid, albastru) și ultimul - alfa, care stabilește nivelul de transparență. Folosind formatul RGBA, prescrieți gradul de transparență, indicându-l în ultima cifră. De exemplu, acesta este cazul: fundal: rgba (240,2,33,0,4035).

concluzie

Astfel, folosindu-vă o simplă, dar eficientă "transparență" a proprietății în cursul lucrărilor de proiectare a site-ului, puteți face elementele sale mai interesante și mai vizibile, cu un minim de efort. Opțiunile descrise pentru specificarea caracteristicilor de transparență vă vor ajuta în acest sens.