Generator box-shadow CSS

Cum folosești generatorul de box-shadow

1. Pornește de la o presetare sau păstrează umbra implicită Delicată. Rândul Presetări oferă Delicată, Dură, În straturi, Elevație, Neumorphism, Interioară și Strălucire.
2. În Straturi de umbră, apasă pe un strat ca să îl selectezi. Fiecare strat poate fi mutat cu Mută în sus și Mută în jos sau șters cu Elimină. Adaugă strat duplică stratul selectat, ca să poți modifica o copie.
3. Editează stratul selectat la Editează stratul selectat: trage punctul din panoul Decalaj sau folosește cursoarele și câmpurile numerice pentru Decalaj orizontal (px), Decalaj vertical (px), Estompare (px) și Extindere (px).
4. Alege Culoarea umbrei cu selectorul de culoare sau scrie orice culoare CSS în câmpul de cod, apoi setează Opacitate (%). Bifează Inset (umbră interioară) ca să desenezi umbra în interiorul casetei.
5. Ajustează Setări de previzualizare (Culoarea casetei, Culoarea fundalului, Raza colțurilor (px)) ca să vezi umbra pe culorile tale reale. Ele influențează doar previzualizarea.
6. Copiază declarația din Cod CSS cu butonul Copiază.

Tastatură: selectează punctul din panoul Decalaj și folosește tastele săgeți ca să îl muți cu 1 px sau cu 10 px împreună cu Shift.

Cum funcționează box-shadow

Sintaxa unei umbre este box-shadow: [inset] x y estompare extindere culoare.

• x și y mută umbra spre dreapta și în jos. Valorile negative o mută spre stânga și în sus. O sursă de lumină deasupra elementului înseamnă un y pozitiv.
• Estomparea înmoaie marginea. Nu poate fi negativă. O estompare de 0 dă o copie cu margini dure a casetei.
• Extinderea mărește (valoare pozitivă) sau micșorează (valoare negativă) umbra înainte de estompare. O extindere negativă combinată cu un y mare ține umbra sub element, nu în jurul lui.
• Culoarea are de obicei transparență. Instrumentul scrie culorile opace în HEX și pe cele translucide cu rgba(), pe care îl înțeleg toate browserele. Dacă scrii o culoare care are deja canal alfa, Opacitate (%) se înmulțește cu el.
• inset pune umbra în interiorul bordurii, ca și cum caseta ar fi apăsată în pagină.

Umbra urmează border-radius al elementului și nu modifică niciodată așezarea în pagină: nu ocupă spațiu și nu declanșează bare de derulare.

De ce să suprapui mai multe umbre?

Umbrele reale nu sunt un singur dreptunghi estompat. O umbră mică, închisă și strânsă stă chiar sub obiect, iar una mare, slabă și difuză se întinde mai departe. Suprapunerea a două până la cinci straturi imită acest lucru și arată mult mai natural decât o singură umbră grea. Presetarea În straturi dublează decalajul și estomparea la fiecare pas, cu o opacitate mică, o tehnică popularizată de multe sisteme de design. Elevație imită umbrele pe trei straturi din Material Design.

Primul strat din listă este desenat peste celelalte, exact ca în valoarea CSS. Ordinea contează mai ales când amesteci umbre inset cu umbre exterioare sau folosești culori puternice.

Neumorphism

Neumorphism („soft UI”) folosește două umbre pe un element care are aceeași culoare ca fundalul: una închisă, decalată în jos și spre dreapta, și una deschisă, decalată în sus și spre stânga. Presetarea Neumorphism setează ambele culori la #e0e5ec. Ține minte că acest stil are contrast scăzut, deci butoanele construite cu el au nevoie de o stare de focus clară și de etichete lizibile.