Neumorphism CSS Shadow — 2계층 코드
CSS 상자 그림자 코드를 시각적으로 구축합니다. 오프셋, 흐림, 확산, 불투명도가 있는 색상, 삽입 모드 및 실시간 미리 보기가 포함된 최대 4개의 레이어에 대한 슬라이더입니다.
처리 중...
0%
결과
이 페이지는 이미 구축된 클래식 뉴모픽 쌍이 있는 생성기를 엽니다. 밝은 레이어 오프셋은 거의 흰색이고 어두운 레이어 오프셋은 8px/8px이며 음소거된 회색-파란색이며 둘 다 16px입니다. 레이어 목록에서 두 레이어 사이를 전환하여 각 측면을 독립적으로 조정합니다.
뉴모피즘(소프트 UI)은 2020년경에 최고조에 달한 양각 스타일입니다. 요소가 배경 위에 떠 있는 것이 아니라 배경에서 돌출된 것처럼 보입니다. 솔직히 말해서 실제 절충안이 있습니다. 요소의 배경이 페이지 배경과 일치할 때만 효과가 작동하고 대비가 낮은 가장자리는 접근성을 손상시킬 수 있습니다. 따라서 대부분의 팀은 이제 전체 디자인 언어가 아닌 악센트로 사용합니다.
스타일이 프로젝트에 적합하다면 이 2개 레이어 선언이 표준 시작점이 됩니다. CSS를 복사하고 요소와 페이지 배경을 동일한 부드러운 회색으로 설정하고 일치하는 테두리 반경을 추가합니다. 모든 것이 브라우저에서 로컬로 실행됩니다.