CSS este plin de opțiuni pentru a îmbunătăți aspectul site-urilor dvs. web; textul și umbrele casetei sunt exemple principale. Ele oferă rezultate similare cu umbrele găsite în software-ul de editare a imaginilor precum Photoshop.

Dar cum funcționează umbrele CSS? Să ne scufundăm direct.

Cum se utilizează CSS Box Shadow

Puteți aplica o umbră de casetă CSS cu o singură linie de CSS care conține un interval de până la șase valori. Ordinea valorilor este crucială pentru ca umbra casetei CSS să funcționeze și arată astfel:

casetă-umbră: offset-x offset-y estompare răspândire culoare intersecție;

Să aruncăm o privire la fiecare dintre valori în ordine.

Poziția umbră a casetei CSS

Valorile offset-x și offset-y controlează poziția umbrei casetei. Valoarea offset-x reprezintă poziția orizontală a umbrei, în timp ce offset-y este decalajul vertical.

 casetă-umbră: 10px 10px;

Valorile pozitive au ca rezultat o umbră sub și în dreapta elementului.

De asemenea, puteți utiliza valori negative pentru h-offset și v-offset:

instagram viewer 
 caseta-umbra: -10px -10px;

Un offset h negativ mută umbra spre stânga, în timp ce un offset V negativ o mută în sus:

CSS Box Shadow Blur

După cum puteți vedea, adăugarea offset-ului h și v-offset-ului la umbra dvs. creează o umbră solidă, fără nicio pene. Valoarea de estompare estompează umbra casetei CSS și are efect dacă furnizați o a treia valoare:

casetă-umbră: 10px 10px 20px;

Cu cât este mai mare numărul pe care îl adăugați la valoarea de estompare, cu atât umbra casetei dvs. CSS va fi mai neclară. Această valoare nu poate fi negativă.

CSS Box Shadow Spread

Valoarea de răspândire vă permite să schimbați dimensiunea umbrei fără a-i modifica poziția.

 casetă-umbră: 10px 10px 20px 30px;

O valoare de răspândire pozitivă va face umbra casetei dvs. CSS mai mare, în timp ce o valoare negativă o va micșora.

Culoarea umbrei casetei CSS

Umbrele casetei CSS sunt implicite la culoarea textului elementului, dar o puteți suprascrie adăugând o culoare:

cutie-umbra: 10px 10px 20px 10px #0000ff;

Culoarea pe care o utilizați trebuie să fie într-un format legal de culoare CSS, cum ar fi un cod hexadecimal, un cod RGB sau o culoare predefinită. Puteți aflați despre codurile hexadecimale și alte opțiuni de culoare legale CSS înainte de a începe cu umbrele.

CSS Box Shadow Inset

Umbrele casetei CSS se încadrează implicit în afara elementului lor atribuit. Adăugând o inserție la proprietatea box-shadow, puteți afișa umbra în interiorul elementului.

cutie-umbra: 10px 10px 20px 10px #0000ff inserție;

Aceasta este o valoare de text predefinită; pur și simplu adăugați sau eliminați pentru a seta valoarea.

Cum să utilizați CSS Text Shadow

Umbrele textului CSS sunt ca umbrele casetei, deși au mai puține valori de modificat. Sintaxa pentru o umbră de text CSS arată astfel:

text-shadow: offset-x offset-y blur-radius culoare;

Dar cum funcționează aceste valori?

Poziția umbră a textului CSS

Compensațiile de umbră ale textului CSS funcționează foarte similar cu aceleași valori de umbră a casetei:

text-umbră: 10px 10px;

Valorile pozitive vor poziționa umbra sub și în dreapta textului.

Valorile negative fac invers, plasând umbra deasupra și în stânga textului.

 text-shadow: -10px -10px;

Puteți amesteca valori negative și pozitive pentru a poziționa perfect umbra textului CSS.

CSS Text Shadow Blur Radius

Raza de estompare a umbrei textului CSS vă permite să estompați umbra din spatele textului.

text-shadow: 10px 10px 10px;

Valoarea implicită pentru această valoare este 0 (fără neclaritate).

Culoarea umbrei textului CSS

În mod implicit, umbrele textului CSS se potrivesc cu culoarea textului. Puteți schimba culoarea textului adăugându-l la sfârșitul proprietății umbră text CSS.

text-shadow: 10px 10px 10px #0000ff;

La fel ca culorile de umbră a casetei CSS, trebuie să utilizați o culoare legală CSS pentru aceasta.

Exemple de design CSS Box și Text Shadow

Puteți începe să experimentați cu utilizarea casetei CSS și a umbrelor de text după ce înțelegeți elementele de bază. Ideile de mai jos ar trebui să vă inspire să găsiți propriile moduri creative de a utiliza aceste proprietăți CSS.

Chenaruri cu două culori cu două umbre de casete CSS

Puteți adăuga mai mult de o umbră de casetă sau umbră de text la un element HTML. Atâta timp cât au virgule între ele, puteți adăuga umbre noi la o singură proprietate.

cutie-umbră: 30px 30px#0000ff, -30px-30px 0px#00ff00;

Acest chenar cu două culori este un bun exemplu în acest sens. Două umbre de casetă CSS cu poziții opuse și fără încețoșare/întindere produc o chenar creativă excelentă.

Umbre duble de text CSS pentru efect dramatic

În mod similar cu ideea de mai sus, puteți adăuga și poziționa text mai multe umbre de text pentru rezultate interesante.

text-shadow: 35px 20px 4px gri închis, -35px -20px 4px gri închis;

Acest exemplu arată o linie de text cu o umbră deasupra și o umbră dedesubt, ambele având valori de culoare bazate pe text.

Fundaluri multicolore cu umbre de casetă CSS

CSS este suficient de puternic pentru a crea active unice și interesante fără fișiere externe. Folosirea unei casete CSS inserate ca fundal este un exemplu excelent în acest sens.

cutie-umbra: 20px 10px 10px 40px #000000 inserție, -50px -30px 8px 60px inserție gri, 30px 20px 6px 90px inserție gri deschis;

Această casetă are un fundal alb, împreună cu trei umbre încorporate în culori diferite. Umbrele se suprapun pentru a crea un fundal unic.

Îmbunătățirea în continuare a acestui efect este o chestiune simplă adăugarea unui gradient de fundal CSS elegant la elementul tău.

CSS Box Shadows & Text Shadows pentru design web creativ

Caseta CSS și umbrele de text sunt ușor de utilizat odată ce știi cum să lucrezi cu ele. Acum aveți instrumentele de care aveți nevoie pentru a începe să lucrați la propriile modele, dar ar trebui să continuați să cercetați CSS pentru a vă îmbunătăți abilitățile.