Cień CSS Neumorfizmu — kod dwuwarstwowy

Ta strona otwiera generator z już zbudowaną klasyczną parą neumorficzną: przesunięcie jasnej warstwy -8px/-8px w prawie białym i ciemna warstwa przesunięta o 8px/8px w wyciszonym szaroniebieskim, obie rozmyte 16px. Przełączaj się między dwiema warstwami na liście warstw, aby dostroić każdą stronę niezależnie.

Neumorfizm (miękki interfejs użytkownika) to styl wytłaczania, którego szczyt przypadł na rok 2020: elementy wyglądają na wytłoczone z tła, a nie unoszą się nad nim. Szczerze mówiąc, wiąże się to z prawdziwymi kompromisami — efekt działa tylko wtedy, gdy tło elementu pokrywa się z tłem strony, a niskokontrastowe krawędzie mogą pogarszać dostępność — dlatego większość zespołów używa go teraz jako akcentu, a nie całego języka projektowania.

Jeśli styl pasuje do Twojego projektu, ta dwuwarstwowa deklaracja jest kanonicznym punktem wyjścia: skopiuj CSS, ustaw element i tło strony na tę samą miękką szarość i dodaj pasujący promień obramowania. Wszystko działa lokalnie w Twojej przeglądarce.