CSS 신경성 생성 생성기

CSS Neumorphism Generator 는 soft-UI 요소 - 한 쌍의 밝은 그림자와 어두운 그림자를 사용하여 모양이 배경에서 부드럽게 돌출되거나 눌러 보이는 스타일을 구축합니다. 표면 색상,그림자 거리,흐림, 대비 강도,코너 반경 및 모양을 설정하고 라이브 미리보기를보고 정확한 CSS 를 복사합니다.

Neumorphism은 페이지와 배경을 공유하는 요소에 두 개의 상자 그림자를 배치하여 왼쪽 상단의 밝은 그림자와 오른쪽 하단의 어두운 그림자를 배치하여 작동합니다. 두 가지 그림자 색상과 오프셋을 설득력 있게 부드러워 보이게 하는 것은 손으로 까다롭습니다. 이 도구는 표면 색상에서 밝은 색조와 어두운 음영을 자동으로 추출하므로 효과가 항상 균형을 이루게 보입니다.

모든 것이 브라우저에서 실행됩니다. 사전 설정을 선택하고 슬라이더를 조정하고 플랫, 오목한, 볼록 및 누름 모양 사이에서 전환하고 CSS를 복사합니다. 계정이 없고 업로드가 없으며 페이지가 로드되면 오프라인에서 계속 작동합니다.

Neumorphism 은 접근성이라는 주요 약점에 대해 맑은 눈으로 사용할 가치가 있습니다. 스타일은 배경과 거의 같은 색상의 표면에 밝은 그림자와 어두운 그림자를 배치하여 작동하므로 컨트롤의 가장자리는 휘도 몇 퍼센트의 차이로 정의됩니다. 그것은 일부 시청자에게 우아하고 대비 감도가 감소 된 사람,희미한 화면 또는 실외에서 보이지 않는 것으로 읽습니다. 대화 형 구성 요소의 경계에 3:1 비율을 요구하는 WCAG 1,4.11 에 실패합니다. 일반적인 절충안은 장식용 표면의 스타일을 유지하고 진정한 대화 형 요소에 실제 경계 또는 명확한 초점 상태를 제공하는 것입니다. 그림자 색상은 여기의 표면 색상에서 파생되므로 어두운 표면은 회색이 아닌 올바르게 반전 된 쌍을 생성합니다.