Efectul umbrei css - lecții css

CSS Shadow Effect

Scopul lecției este de a arăta un atribut suplimentar al "foilor de stil în cascadă" (CSS), cu care elementul obișnuit poate fi arătat special. Acest atribut este bοx- shadow:







Acest atribut adaugă o umbră elementului și pot fi mai multe umbre (sunt enumerate cu virgulă).

Există două tipuri de intrări:

Prima este o schimbare în X. Shift în Y. Raza umbrei, rgb este culoarea, gradul de estompare (de la 0,1 la 1);

Culoarea RGB reprezintă Red Green Blue, dacă utilizați generatorul html-culori. apoi observați că în plus față de culoarea codului html sunt de asemenea trei linii cu aceste nume, în fiecare dintre ele un număr. Codul culorii generate este scris sub forma a trei numere separate printr-o virgulă.







Mai jos este un exemplu care demonstrează în mod clar descris mai sus - un bloc pătrat cu o umbră în stânga. Umbra va fi negru (rgba (0,0,0, ...);

După cum puteți vedea din exemplu - umbra este deplasată cu 4 pixeli în stânga și cu 2 pixeli în jos și cel puțin culoarea umbrei este neagră, dar datorită faptului că nivelul de estompare este de 0,5, culoarea umbrei este o culoare gri neclară.

Al doilea mod de a seta umbra este trecerea cu X. Shift by Y. Blur, rază, culoare.

De exemplu, hai să facem un bloc a cărui umbră va fi pe dreapta.

De fapt, atrag atenția asupra faptului că umbra poate fi setată și textul. Mai jos este un bloc cu textul din interiorul acestuia și textul stabilit câțiva parametri de umbră (prima cale). Blocul are colțuri rotunjite și o umbră fixată pentru aceasta, automat "rotunjită".

Umbra din jurul blocului și textul

Acum se va demonstra că puteți seta mai multe umbre simultan. În acest exemplu, vor fi două dintre ele, iar una dintre umbre este așezată în interiorul blocului verde deschis (inserat).


Umbra din interiorul blocului și sub el

Blocul este ca o formă tridimensională.

Ei bine, în sfârșit, vom pune ultimul bloc în câteva umbre.


Umbra din interiorul blocului, de jos, deasupra și în jurul acestuia







Articole similare

Pagina anterioară

Pagina următoare

Trimiteți-le prietenilor: