Neumorfism CSS Shadow — Cod cu două straturi

Această pagină deschide generatorul cu perechea neumorfă clasică deja construită: un strat ușor offset −8px/−8px în aproape alb și un strat întunecat offset 8px/8px într-un gri-albastru dezactivat, ambele neclare 16px. Comutați între cele două straturi din lista de straturi pentru a regla fiecare parte independent.

Neumorfismul (interfața de utilizare moale) este stilul în relief care a atins apogeul în jurul anului 2020: elementele par extrudate din fundal, mai degrabă decât să plutească deasupra acestuia. Sincer, vine cu compromisuri reale - efectul funcționează numai atunci când fundalul elementului se potrivește cu fundalul paginii, iar marginile cu contrast scăzut pot afecta accesibilitatea - așa că majoritatea echipelor îl folosesc acum ca accent, nu ca un întreg limbaj de design.

Dacă stilul se potrivește cu proiectul dvs., această declarație cu două straturi este punctul de pornire canonic: copiați CSS-ul, setați elementul și fundalul paginii la același gri moale și adăugați o rază de chenar potrivită. Totul rulează local în browserul dvs.