Tutorial CSS Box Shadow: Un ghid pas cu pas (+ Exemple)

Publicat: 2022-03-09

De ce proprietatea CSS box-shadow merită propriul tutorial? Pentru că, după cum veți vedea mai jos, este una dintre cele mai complexe proprietăți care ia un număr de valori în același timp. Acest lucru ar putea face o provocare deosebită pentru începători.

Dacă până acum te-ai chinuit să folosești box-shadow mod corespunzător, ai ajuns la locul potrivit. În ghidul de mai jos, vom trece peste tot ce este de știut despre această proprietate CSS. Vom vorbi despre ceea ce face, cum să-și folosească corect sintaxa, câteva exemple interesante box-shadow CSS și, în sfârșit, câteva instrumente generatoare care ușurează lucrul cu acesta.

Ce este CSS Box Shadow?

Chiar dacă nu sunteți conștient de proprietatea CSS box-shadow până acum, probabil ați văzut-o în acțiune pe web.

Exemplu de tutorial cu umbra casetei css

Mai sus este un bun exemplu despre cum arată în sălbăticie (chiar dacă l-am mărit puțin aici pentru a face un punct). box-shadow este, practic, ceea ce spune numele: vă permite să adăugați o umbră în cadrul aproape oricărui element. Umbra va adera, de asemenea, la forma ancorei sale, fie că este pătrată, dreptunghiulară, rotundă sau ovală. Acest lucru este valabil chiar și atunci când ați setat o proprietate border-radius .

umbre de casetă care aderă la exemplu de formă a elementului de ancorare

Pe web, oamenii îl folosesc pentru a crea o serie de efecte diferite și vom vedea câteva exemple interesante box-shadow mai jos. Deocamdată, să vorbim despre cum funcționează la cel mai elementar nivel.

Sintaxa umbră casetă de bază

Când vă uitați la un element cu o umbră de casetă folosind instrumentele de dezvoltare ale browserului, veți găsi un marcaj ca acesta:

 box-shadow: inset 0 25px 40px 0 rgba(0, 0, 0, 0.3);

Pare puțin complicat, nu?

Dar nu vă faceți griji, nu aveți nevoie de toate aceste declarații tot timpul. În plus, odată ce înțelegi cum funcționează, nu mai pare la fel de confuz ca la început.

După cum puteți vedea mai sus, box-shadow poate lua până la șase valori. Să le trecem peste rând pe rând.

offset-x

Prima valoare este distanța orizontală a umbrei de pe partea laterală a elementului său de ancorare. O valoare pozitivă o mută la dreapta, una negativă la stânga.

Puteți utiliza toate tipurile de date CSS obișnuite care indică lungimea pentru această valoare, cum ar fi px , em , vh și altele. Cele mai utilizate sunt px și em .

exemplu offset x

offset-y

La fel ca cele de mai sus, dar pentru axa verticală. Valoarea pozitivă mută umbra sub element, cele negative deasupra.

exemplu de compensare

raza de estompare

Aceasta definește neclaritatea umbrei casetei. Cu cât valoarea este mai mare, cu atât va fi mai neclară. blur-radius ia, de asemenea, toate denumiri de lungime CSS comune, dar nu valori negative.

exemplu de rază de estompare

raza de raspandire

Acesta controlează răspândirea umbrei dincolo de înălțimea sau lățimea elementului său. Cu cât lungimea este mai mare, cu atât răspândirea este mai mare. De asemenea, puteți utiliza numere negative pentru a introduce contracția.

exemplu de rază de răspândire

culoare

După cum probabil puteți ghici, acest lucru vă permite să definiți culoarea umbrei casetei în toate modurile obișnuite. Cel mai adesea este notat în valori hexazecimale (de exemplu #ededed ) sau rgba (de ex. rgba rgba(46, 182, 142, 0.9) ). Acesta din urmă vă permite, de asemenea, să controlați opacitatea, care este folosită în mod obișnuit pentru umbre.

exemple de culori umbra casetei

Rețineți, dacă nu setați o culoare, browserul va folosi culoarea de text utilizată în prezent.

medalion

În cele din urmă, puteți adăuga opțional inset la începutul declarației. Acest lucru schimbă umbra de la o umbră la o umbră în interiorul elementului. Apare în interiorul chenarului, deasupra fundalului, dar sub conținutul elementului, deci nu va acoperi niciun text de exemplu.

exemple de umbre de casete inserate

Utilizarea valorilor în ordine

Iată ordinea în care apar valorile proprietății box-shadow .

 box-shadow: offset-x offset-y blur-radius spread-radius color inset;

Pentru a atribui o umbră casetă, aveți nevoie de cel puțin două valori de lungime. Browserul le va folosi automat pentru offset-x și offset-y . Dacă adăugați o a treia, aceasta va fi interpretată ca blur-radius , a patra ca spread-radius . inset și color sunt opționale și pot apărea la sfârșit sau la început și în orice ordine. CSS-ul de mai jos va avea toate același rezultat.

 box-shadow: 20px 20px 10px 0 inset rgba(0, 0, 0, 0.5); box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5) inset; box-shadow: inset 20px 20px 10px 0 rgba(0, 0, 0, 0.5); box-shadow: rgba(0, 0, 0, 0.5) 20px 20px 10px 0 inset; box-shadow: rgba(0, 0, 0, 0.5) inset 20px 20px 10px 0; box-shadow: inset rgba(0, 0, 0, 0.5) 20px 20px 10px 0;

Atribuirea mai multor umbre de casetă

Ceva de care nu toată lumea este conștientă este că puteți seta mai multe umbre de casetă pentru același element. Pentru aceasta, pur și simplu furnizați mai mult de un grup de valori și separați-le prin virgule.

 box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5), -20px -20px 10px 0 olive;

Codul de mai sus apare astfel:

exemplu de umbre cu casete multiple

Puteți folosi acest lucru și pentru a crea linii în jurul elementelor. Pentru asta, trebuie pur și simplu să adăugați mai multe umbre în culori diferite și să setați offset-urile și estomparea acestora la zero.

 box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.5), 0 0 0 10px olive;

Rezultă contururi cu culori diferite:

umbre de casete multiple ca exemplu de contur

Rețineți că acest lucru nu afectează dimensiunile modelului de cutie, așa că umbrele de casetă nu se adaugă la dimensiunea totală a unui element așa cum o vor face margin sau border .

Compatibilitate browser

Compatibilitatea browserului pentru box-shadow nu este cu adevărat ceva de care trebuie să vă faceți griji. Este o proprietate CSS foarte stabilită, acceptată de aproape orice browser, inclusiv markup precum inset și umbre multiple.

Compatibilitate cu browserul css box shadow

Pentru a suporta versiuni mai vechi ale unor browsere, este obișnuit să includeți proprietățile -webkit-box-shadow și -moz-box-shadow cu aceleași valori. Cu toate acestea, pentru cele mai recente versiuni ale celor mai comune browsere acest lucru nu mai este necesar.

Exemple de umbre pentru casete CSS

În continuare, în acest tutorial box-shadow , vrem să trecem peste câteva exemple de umbre casete CSS, astfel încât să puteți vedea ce este posibil cu această proprietate. Vom trece de la aplicații mai degrabă standard la altele mai extraordinare pentru că, după cum veți vedea, puteți face lucruri cu adevărat interesante cu ele.

Adăugați o umbră la un buton

Butoanele sunt adesea un element care are aplicată o umbră de casetă. Asta pentru că este o modalitate bună de a le face să iasă în evidență pe pagină. La urma urmei, dacă includeți un buton, de obicei doriți ca oamenii să facă clic pe el. Pentru a le solicita să facă acest lucru, iată un exemplu simplu cum se poate face asta cu o umbră de casetă.

umbră casetă pentru exemplu de buton

Markupul însoțitor arată astfel:

 box-shadow: 0px 11px 12px rgba(0, 0, 0, 0.2);

Soft Box Shadow

Dacă doriți să creați o umbră de casetă CSS relativ moale, lucrați în cea mai mare parte cu estompare și răspândire în timp ce setați offset-urile la 0 . În acest fel, umbra nu capătă o formă distinctă, ci doar apare ușor în jurul marginilor.

exemplu de umbră cutie moale

Pentru a obține efectul de mai sus, puteți utiliza următorul marcaj:

 box-shadow: 0 0 50px 10px #999;

Aceasta este, de asemenea, o modalitate excelentă de a crea o umbră de casetă pe toate laturile unui element. Dacă doriți să o faceți mai distinctă, pur și simplu măriți răspândirea, reduceți neclaritatea și utilizați o culoare mai închisă.

Multiple Box Shadows

Exemplele finale box-shadow sunt pentru utilizarea mai multor umbre simultan. Aceasta oferă posibilități diferite. În primul rând, puteți introduce o umbră rece, decolorată, în mai multe etape.

exemplu de mai multe umbre de casete decolorate

Este surprinzător de simplu: trebuie doar să stivuiți umbrele casetei una peste alta, cu decalaje crescânde uniform, în timp ce reduceți opacitatea în același timp. Apropo, atunci când utilizați mai multe umbre de casetă, este util să scrieți declarațiile în rânduri separate, mai degrabă decât ca o singură declarație lungă. Îl face mult mai ușor de înțeles.

 box-shadow: 10px 10px rgba(0, 0, 0, 0.4), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px rgba(0, 0, 0, 0.05);

De asemenea, puteți duce acest lucru mai departe prin introducerea de umbre de casetă albă cu o valoare negativă a spread-radius între ele, rezultând iluzia mai multor elemente unul peste altul.

umbre de casete multiple cu exemplu de spații albe

De ce valoarea spreadului negativ? Pentru că altfel umbrele cutiei albe le-ar acoperi pe cele de sub ele. Valoarea negativă le micșorează astfel încât culoarea din spate să poată străluci. Mai jos este marcajul de care aveți nevoie dacă doriți să introduceți un efect similar pe propriul dvs. site web:

 box-shadow: 10px 10px 0px -3px rgba(255, 255, 255), 10px 10px rgba(0, 0, 0, 0.4), 20px 20px 0px -3px rgba(255, 255, 255), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px 0px -3px rgba(255, 255, 255), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px 0px -3px rgba(255, 255, 255), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px 0px -3px rgba(255, 255, 255), 50px 50px rgba(0, 0, 0, 0.05);

Ultimul exemplu pentru mai multe umbre de casete CSS este metoda menționată mai sus de a seta offset-urile și estomparea la 0 . După cum am văzut mai sus, rezultă un element având mai multe contururi, colorate în acest caz. Cu toate acestea, acest lucru funcționează numai deoarece valoarea spread-radius crește pentru fiecare umbră de casetă.

Exemplu de mai multe umbre cu casete CSS colorate

Dacă doriți să încercați acest lucru pentru dvs., puteți începe cu asta:

 box-shadow: 0px 0px 0px 3px red, 0px 0px 0px 6px orange, 0px 0px 0px 9px yellow, 0px 0px 0px 12px green, 0px 0px 0px 15px blue, 0px 0px 0px 18px indigo, 0px 0px 0px 21px violet;

Cele mai bune generatoare de umbre cutie

După cum am descris, box-shadow are o mulțime de valori. Prin urmare, poate dura puțină încercare și eroare până când ajungeți la tipul de umbră dorit.

Pentru a fi mai ușor, există o mulțime de instrumente generatoare de umbre cutie care vă permit să vă jucați cu controalele lor, să vedeți rezultatele imediat și apoi să copiați pur și simplu marcajul odată ce sunteți satisfăcut.

Exemplu de instrument de generare a umbrelor casetei css

Iată cele mai bune opțiuni pentru generatoarele de umbre cutie:

  • box-shadow.dev — Acest instrument cu un singur scop are toate funcționalitățile de care aveți nevoie și cea mai bună interfață de utilizator a grupului. Puteți utiliza inset , puteți crea mai multe umbre pentru casete, puteți controla decalările, estomparea și răspândirea prin glisoare și introduceți culorile manual. Când sunteți mulțumit, faceți clic pe Afișare cod pentru a copia marcajul CSS. Singurul dezavantaj este că nu oferă cod pentru browserele mai vechi.
  • CSSmatic Box Shadow CSS Generator — Similar cu cel de mai sus. Vă permite să controlați proprietățile box-shadow prin glisoare și, de asemenea, să introduceți numerele manual. Are propriul control pentru opacitate, ceea ce este frumos. Pe de altă parte, îi lipsește funcționalitatea pentru mai multe umbre. Codul de marcare pe care îl obțineți include browsere mai vechi.
  • Box Shadow CSS Generator — O opțiune solidă care are și o capacitate de alegere a culorilor și vă oferă cod și pentru browserul mai vechi. Îl poți copia cu un simplu clic. Are control al opacității, dar poate crea doar o umbră.
  • CSS3gen CSS3 Box Shadow Generator — Un alt generator de umbre. O caracteristică interesantă aici este că, în loc de decalaje x și y, puteți selecta unghiul de umbră și distanța, iar instrumentul va face restul automat. Din anumite motive spread-radius și inset au propriul lor meniu. CSS-ul pe care îl puteți copia și lipi pur și simplu include și markup pentru generațiile mai vechi de browser.

Gânduri finale: CSS Box Shadow

Proprietatea box-shadow poate fi copleșitoare la început. Este una dintre acele proprietăți care ia o mulțime de valori, așa că ar putea părea mai complicat decât este de fapt. Sperăm că acest tutorial CSS cu umbră a pus acest sentiment în pace.

Mai sus, am analizat ce este CSS box-shadow și cum funcționează. Am explicat sintaxa, valorile și modul în care acestea funcționează împreună. În plus, am analizat o serie de exemple despre cum să utilizați umbrele casetei CSS în viața reală, inclusiv marcajele pe care le puteți utiliza imediat. În cele din urmă, pentru cei care doresc puțin ajutor, am enumerat o serie de generatoare box-shadow CSS care pot face o mare parte din munca grea pentru tine.

Până acum, ar trebui să vă simțiți capabil să utilizați această funcție CSS pe site-ul dvs. Așteptăm cu nerăbdare să vedem ce faci cu el.

Cum folosești CSS box shadow pe site-ul tău? Vreun caz de utilizare interesant pe care nu le-am acoperit mai sus? Spune-ne în comentariile de mai jos!