Cum se folosește

Începe de la o presetare sau ajustează offset-ul, blur-ul, spread-ul, culoarea și opacitatea primului strat.
Adaugă mai multe straturi pentru o adâncime mai naturală sau bifează „Inset” pentru o umbră interioară.
Schimbă fundalul de previzualizare și culoarea casetei ca să se potrivească designului tău, apoi copiază CSS-ul.

Cum funcționează

box-shadow primește, pentru fiecare strat: decalaj orizontal, decalaj vertical, rază de estompare, rază de expansiune și culoare, opțional precedate de `inset`. Decalajele pozitive mută umbra la dreapta și în jos. Estomparea înmoaie marginea și nu poate fi negativă; expansiunea mărește (pozitiv) sau micșorează (negativ) umbra înainte de estompare. Mai multe straturi se separă prin virgule, iar primul este desenat deasupra.

Ridicarea realistă combină de obicei o umbră mică și compactă cu una mai mare și mai difuză, cu opacitate redusă, exact ceea ce face presetarea „Elevated”. Culorile sunt scrise ca rgba() pentru ca opacitatea să fie explicită. Umbrele urmăresc border-radius-ul elementului și nu ocupă spațiu în layout, deci nu mută niciodată alte elemente.

Umbrele cu valori de estompare foarte mari aplicate pe multe elemente pot încetini derularea pe telefoanele de gamă inferioară. Dacă animați o umbră, de obicei este mai fluid să afișați treptat un pseudo-element care are deja umbra decât să animați box-shadow în sine.

Exemple

Card pe o pagină luminoasă

box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); oferă unui card o margine clară plus o ridicare delicată.

Inel de focus fără deplasarea layout-ului

Un strat cu decalaj 0, estompare 0 și expansiune de 3px în culoarea brandului desenează un inel solid în jurul unui buton. Spre deosebire de o bordură, nu modifică dimensiunea elementului.

Câmp de input apăsat

inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) face ca un câmp de text să pară ușor adâncit.

Întrebări frecvente

Care este diferența dintre box-shadow și filter: drop-shadow()?

box-shadow urmează caseta elementului și border-radius și acceptă spread și inset. drop-shadow() urmează forma vizibilă, inclusiv zonele transparente ale imaginilor PNG sau SVG, dar nu are spread sau inset.

De ce este tăiată umbra mea?

Un părinte cu overflow: hidden decupează tot ce depășește caseta sa, inclusiv umbrele. Adaugă padding părintelui sau mută regula overflow.

Câte straturi ar trebui să folosesc?

Una sau două sunt suficiente pentru majoritatea interfețelor. Mai multe straturi pot arăta mai fin, dar costă puțin mai mult la randare, ceea ce contează la liste lungi.

Confidențialitate

CSS-ul este generat în browserul tău. Nimic nu este încărcat sau stocat.