Funcționarea proprietății CSS box-shadow
Proprietatea box-shadow din CSS permite adăugarea de efecte de umbră în jurul cadrului unui element de design web. Această proprietate acceptă o serie de parametri preciși care definesc poziția, dispersia, culoarea și comportamentul umbrei în raport cu elementul părinte.
Generator Box Shadow utilizează o serie de glisoare și controale interactive pentru a manipula acești parametri în timp real. Modificările aduse valorilor sunt randate instantaneu, permițând vizualizarea directă a modului în care lumina virtuală interacționează cu elementul. Codul CSS rezultat este generat automat sub formă de valori separate prin virgulă atunci când sunt utilizate mai multe straturi, fiind pregătit pentru a fi copiat direct în foile de stil ale proiectelor dumneavoastră.
Parametrii de control ai umbrelor
Fiecare strat de umbră este definit de parametri geometrici și cromatici specifici, care influențează percepția vizuală a adâncimii și distanței:
- Deplasare orizontală: Acest glisor controlează poziția umbrei pe axa X, deplasând-o la stânga sau la dreapta. Intervalul de valori este cuprins între -50px și 50px. O valoare pozitivă mută umbra spre dreapta, sugerând o sursă de lumină situată în stânga elementului.
- Deplasare verticală: Acest glisor controlează poziția umbrei pe axa Y, deplasând-o în sus sau în jos. Intervalul de valori este cuprins între -50px și 50px. O valoare pozitivă mută umbra în jos, indicând o sursă de lumină poziționată deasupra elementului.
- Estompare (Blur): Definește gradul de difuzie a marginilor umbrei, cu un interval de la 0px la 100px. O valoare de 0px generează o umbră cu margini perfect clare și solide. Pe măsură ce valoarea crește, marginile devin mai șterse și mai soft, simulând o sursă de lumină difuză sau o distanță mai mare a elementului față de fundal.
- Extindere (Spread): Acest parametru mărește sau micșorează dimensiunea de bază a umbrei înainte ca algoritmul de estompare să fie aplicat. Intervalul permis este de la -50px la 50px. O valoare pozitivă extinde umbra în toate direcțiile, în timp ce o valoare negativă trage umbra spre interior, reducându-i suprafața.
- Culoare umbră și Opacitate: Selectorul de culoare stabilește tonul cromatic al umbrei, iar glisorul pentru opacitate controlează nivelul de transparență al acesteia. Ajustarea opacității este esențială pentru a integra natural umbra pe fundaluri colorate sau texturate.
Comportamentul umbrelor interioare (Inset)
În mod implicit, o umbră este proiectată în exteriorul elementului, creând iluzia că acesta plutește deasupra fundalului. Activarea opțiunii Umbră interioară (Inset) inversează acest comportament.
Când opțiunea Umbră interioară (Inset) este activată, umbra este randată în interiorul marginilor elementului. Această schimbare modifică radical percepția de volum: elementul nu mai pare ridicat deasupra paginii, ci pare adâncit în suprafața acesteia. Acest efect este utilizat în mod frecvent pentru a proiecta câmpuri de introducere a datelor (input-uri) sau butoane în stare apăsată, oferind utilizatorului un indiciu vizual clar privind starea elementului de interfață.
Tehnica suprapunerii straturilor pentru realism
În designul web modern, o singură umbră cu o estompare mare poate părea artificială sau plată. Pentru a obține un efect realist de profunzime și elevare, designerii și dezvoltatorii front-end folosesc tehnica suprapunerii mai multor straturi de umbră.
Generator Box Shadow pre-rendează cinci straturi de umbră. Primul strat are setate valorile implicite de 0 8 24 -4 și o culoare neagră cu o transparență de 18%, în timp ce celelalte straturi sunt inițial ascunse. Utilizatorul are posibilitatea de a folosi butoanele Adaugă strat și Elimină stratul pentru a gestiona structura umbrei complexe.
Prin combinarea unui strat strâns, întunecat și cu estompare redusă (care simulează ocluzia ambientală din imediata apropiere a obiectului) cu un strat mai larg, foarte estompat și cu opacitate scăzută (care simulează dispersia luminii la distanță), se obține o umbră naturală, tridimensională. În codul CSS generat, toate aceste straturi sunt concatenate și afișate sub formă de valori separate prin virgulă în cadrul aceleiași proprietăți box-shadow.
Confidențialitate și procesare locală
Fiecare umbră este randată direct în browserul dumneavoastră. Nimic din ceea ce setați aici nu este încărcat pe BroBroGo. Toate calculele geometrice, ajustările de opacitate și generarea codului CSS se realizează local, pe dispozitivul dumneavoastră, asigurând un flux de lucru privat.
Întrebări frecvente
Ce controlează, de fapt, offset-ul, blur-ul și spread-ul?
Deplasarea (offset) mută umbra la stânga/dreapta și sus/jos, estomparea (blur) îi atenuează marginile, iar extinderea (spread) o mărește sau o micșorează înainte de estompare. O valoare negativă pentru spread trage umbra spre interior, fiind utilă pentru o umbră strânsă, de profunzime.
Ce face opțiunea inset?
O umbră normală apare în exteriorul elementului, ca lumina din spatele unui card suspendat. Opțiunea „Inset” o mută în interior, astfel încât elementul pare adâncit în pagină — util pentru câmpuri de introducere sau butoane apăsate.
De ce să suprapunem mai multe straturi de umbră?
O singură umbră tinde să pară plată dincolo de o anumită dimensiune. Efectul realist de elevare combină de obicei o umbră strânsă și întunecată cu una mai fină și mai extinsă — adăugați un al doilea strat și ajustați-le independent pentru a obține acest efect.
Care sunt limitele fizice ale glisoarelor din acest instrument?
Glisoarele pentru deplasarea orizontală, deplasarea verticală și extindere (spread) permit valori cuprinse între -50px și 50px. Glisorul pentru estompare (blur) permite ajustarea valorilor într-un interval de la 0px până la maximum 100px.