신형성은 부드러운 플라스틱으로 성형된 모양처럼 버튼이나 카드가 페이지 자체에서 눌려지는 것처럼 보이는 모양입니다. 테두리가 없고 배경과 다른 채우기 색상이 없으며 한쪽에는 창백한 하이라이트만 있고 다른 한쪽에는 부드러운 그림자가 디자인 모형으로 아름답게 촬영됩니다. 실제 인터페이스에서는 두 가지 방법으로 잘못되기 쉽습니다: 효과가 사라지거나 컨트롤이 잘 보이지 않게 됩니다.
두 문제 모두 색상과 그림자에 대한 소량의 산술로 귀결됩니다. 이 가이드에서는 소프트 UI 효과가 두 가지로 어떻게 구축되는지 설명합니다 box-shadow 레이어, 하나의 표면 색상에서 밝은 색과 어두운 색조가 파생되는 방법, 평평하고 오목하고 볼록하고 눌린 모양이 변경되는 것, WCAG 대비 규칙에 따라 사용 가능한 네우모픽 인터페이스를 유지하는 방법. 그만큼 CSS 신경성 생성 생성기 라이브 미리보기로 아래 코드를 모두 생성합니다.
TL;DR: 신형 요소는 페이지와 동일한 배경색과 두 개의 상자 그림자를 갖습니다: 더 어두운 것은 아래와 오른쪽으로 오프셋되고,더 밝은 것은 위와 왼쪽으로 오프셋됩니다. 두 가지 모두에 삽입 키워드를 사용하면 요소가 눌려 보이는 것처럼 보입니다. CSS 신형 생성기는 거리 (2 ~ 50 px), 흐림 (0 ~ 100 px), 강도 (2 ~ 40%) 및 반경 (0 ~ 80 px) 에 대한 슬라이더와 함께 표면 색상에서 두 그림자 색상을 파생하며 평면,오목, 볼록 및 누른 모양을 기본으로합니다 가벼운 표면
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff. 그 그림자는 표면에 대하여 단지 대략 1.5:1 대조, 잘 통제 경계에 3:1 WCAG 요구의 밑에 도달합니다, 그래서 상호 작용하는 성분은 눈에 보이는 경계 또는 초점 국가를 필요로 합니다, 클라이언트 측, 자유로운, 가입 없음입니다.
UI 디자인에서 Neumorphism이란 무엇입니까?
소프트 UI 라고도 불리는 Neumorphism 은 인터페이스 요소가 테두리 또는 대조 채우기 대신 한 쌍의 밝은 그림자와 어두운 그림자를 사용하여 배경에서 돌출되거나 눌러지는 시각적 스타일입니다. 이름은 "new" 및 "skeuomorphism"를 혼합하여 물리적 재료를 모방 한 오래된 스타일입니다. Neumorphism 은 하나의 재료,단일 연속 표면을 모방하고 왼쪽 상단의 상상 광원에 의존합니다.
이 스타일은 2020년경 디자인 쇼케이스 사이트에서 인기를 얻었습니다. 장식 패널, 좋은 화면에서 볼 수 있는 대시보드, 일회성 영웅 그래픽에 매우 적합합니다. 밀도가 높은 형태, 야외에서 사용되는 모든 것, 사용자가 빠르게 찾아야 하는 모든 컨트롤에는 적합하지 않습니다. 접근성 섹션에서 다루는 이유 때문입니다.
CSS에서 신형 효과는 어떻게 작용합니까?
효과에는 세 가지가 필요합니다: 페이지와 일치하는 요소의 배경색,경계 반경,반대 방향으로 드리워진 두 그림자. CSS box-shadow 속성은 문서화된 대로 각각 x 오프셋, y 오프셋, 흐림 반경 및 색상이 있는 쉼표로 구분된 그림자 목록을 허용합니다 MDN's 박스-섀도 참조 에 지정되어 CSS 배경 및 경계 레벨 3.
다음은 generator's 기본 Light 사전 설정의 출력입니다:
border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;
그림자 목록을 왼쪽에서 오른쪽으로 읽습니다. 첫 번째 그림자는 표면보다 어두운 회색으로 24 픽셀에 걸쳐 흐리게 12 픽셀 오른쪽 오프셋: 즉 빛에서 멀리 측면에 그늘입니다. 두 번째는 오프셋 12 픽셀 왼쪽 및 12 표면보다 밝은 색상으로 위로: 빛을 직면하는 측면의 하이라이트. 때문에 element's 자신의 배경은 동일합니다 #e0e0e0 페이지로서,눈에 보이는 가장자리는 없습니다. 그 모양은 두 그림자가 만나는 경계로만 존재합니다.
내 신경성 신경 기능이 나타나지 않는 이유는 무엇입니까?
가장 일반적인 원인은 element's 배경과 그 뒤에 있는 것이 무엇이든 간에 불일치입니다. 페이지가 흰색이고 카드가 #e0e0e0는,당신은 그림자를 가진 회색 카드를,부드러운 밀어남 아닙니다 봅니다. parent's 배경을 성분과 동일한 색깔로 놓으십시오. generator's 시사 패널은 이것을 자동적으로 합니다,왜 백색 페이지에 풀칠될 때 그것이 바로 거기 그리고 틀리게 보는지.
두 번째 원인은 볼 수 없는 하이라이트 색상입니다. 매우 밝은 표면에서는 "light" 그림자가 이미 순백색일 수 있으며 순백색 페이지에서는 흰색 그림자가 보이지 않습니다. 이것이 바로 신형성이 거의 이루어지지 않는 이유이기도 합니다 #ffffff.
밝은 그림자와 어두운 그림자 색상은 어떻게 계산됩니까?
발전기는 동일한 양에 의하여 지상 색깔의 각 빨강, 녹색 및 파란 수로를 이동합니다: 255 의 강렬 백분율. 밝은 그늘은 그 양을 추가하고 어두운 그늘은 그것을 빼고, 각 수로는 0 에서 255 범위에 죄지고 둥글게 됩니다.
기본 Light 사전 설정인 서페이스에 대한 계산은 다음과 같습니다 #e0e0e0 (224, 224, 224) 15% 강도:
- 교대 금액: 255의 15% = 38.25.
- 어두운 색조: 224 - 38.25 = 185.75, 186으로 반올림, 이는 16진수입니다
ba. 결과:#bababa. - 밝은 그늘: 224 + 38.25 = 262.25, 255, 육각에 고정
ff. 결과:#ffffff.
3 단계는 알만한 가치가 있는 한계를 보여줍니다. On #e0e0e0 하이라이트는 강도가 통과하면 순백색에 닿습니다 (255 - 224) / 255 = 12.2%. 하이라이트를 더 밝게 만들지 않고 그림자를 더 어둡게 만드는 위의 모든 강도로 인해 효과가 한쪽으로 치우치게 됩니다. 밝은 표면에서는 강도를 해당 클램프 지점 근처에 유지하거나 약간 더 어두운 표면을 선택하여 하이라이트에 공간이 있습니다.
동일한 규칙이 다른 사전 설정을 제공합니다:
| 미리 설정 | 표면 | 거리 / 흐림 | 강도 | 어두운 그늘 | 밝은 그늘 |
|---|---|---|---|---|---|
| 라이트 | #e0e0e0 |
12 / 24px | 15% | #bababa |
#ffffff |
| 카드 | #f0f0f3 |
10 / 20px | 12% | #d1d1d4 |
#ffffff |
| 어두운 | #2d2f34 |
12 / 24px | 12% | #0e1015 |
#4c4e53 |
| 눌려진 | #e0e0e0 |
12 / 24px | 15% | #bababa |
#ffffff |
| 볼록한 | #e0e0e0 |
12 / 24px | 15% | #bababa |
#ffffff |
Dark 사전 설정에서 (45, 47, 52)의 각 채널에서 30.6을 빼면 (14, 16, 21) 또는이 됩니다 #0e1015, 그리고 그것을 더하면 (76, 78, 83), 또는이 됩니다 #4c4e53. 이동이 채널에 걸쳐 동일하기 때문에 표면의 약간의 파란색 색조가 두 가지 색조로 전달되므로 어두운 신형 카드는 평평한 중성 회색으로 변하지 않습니다.
네 가지 모양은 어떻게 변하는가?
Shape 는 element's 배경 채우기와 그림자가 바깥쪽에 앉는지 안쪽에 앉는지 제어합니다. 거리,흐림 및 반경은 네 가지 모두에 대해 동일하게 동작합니다.
| 모양 | 배경 | 그림자 | 처럼 보인다 |
|---|---|---|---|
| 플랫 | 단단한 표면 색깔 | 아우터 | 융기된 고원 |
| 볼록한 | linear-gradient(145deg, light, dark) |
아우터 | 왼쪽 상단에서 조명이 켜진 높은 돔 |
| 오목 | linear-gradient(145deg, dark, light) |
아우터 | 안쪽으로 휘어지는 융기된 접시 |
| 눌려진 | 단단한 표면 색깔 | 둘 다 inset |
페이지 안으로 밀려들어온 빈 공간 |
Pressed 프리셋은 다음을 생성합니다:
border-radius: 24px;
background: #e0e0e0;
box-shadow: inset 12px 12px 24px #bababa, inset -12px -12px 24px #ffffff;
와 함께 inset는,그림자 emplement's 패딩 상자 안쪽에 그려집니다,그래서 어두운 그늘은 위 왼쪽 안 가장자리를 따라서 나타나고 하이라이트는 아래 오른쪽을 따라서 나타납니다. 그것은 점화 단서를 반전하고 불경기 같이 읽습니다. 그것은 자연적인 "active" 또는 "on" 휴식 상태가 평평한 토글을 위한 상태입니다.
볼록 사전 설정은 그라디언트 정지로서 전체 밝은 색과 어두운 색조를 사용합니다 linear-gradient(145deg, #ffffff, #bababa)15% 강도에서 상당히 강한 곡선입니다. 더 미묘한 돔의 경우 강도를 낮추십시오; 둘 다 동일한 두 색상에서 나오므로 그라데이션과 그림자를 함께 부드럽게 만듭니다.
거리, 흐림 및 반경은 어떻게 상호 작용합니까?
슬라이더는 독립적이지만 모양은 비율에 따라 다릅니다.
- 거리 (2 ~ 50 px) 는 각 그림자가 양쪽 축에서 얼마나 멀리 오프셋되어 있는지를 설정합니다. 겉보기 높이를 제어합니다: 거리가 멀수록 요소가 페이지 위로 더 높이 떠 있습니다.
- 흐리게 하다 (0 ~ 100 px) 는 그림자 가장자리가 얼마나 부드러운지를 설정합니다. 모든 사전 설정에서와 같이 거리의 두 배 주위의 흐림은 특징적인 베개 모양을 제공합니다. 거리와 같거나 그 아래에 흐림은 컷 아웃처럼 보이는 단단한 모서리의 그림자를 생성합니다.
- 반경 (0 ~ 80 px) 모서리를 둥글게 만듭니다. 소프트 UI 는 거의 항상 넉넉한 라운딩을 사용합니다; 부드러운 그림자가있는 사각형 모서리는 렌더링 오류처럼 보입니다.
- 강도 (2 ~ 40%) 는 음영이 표면 색상에서 얼마나 멀리 이동 하는지를 설정합니다.
실용적인 시작 비율은 흐림 = 2 x 거리, 반경 = 2 x 거리, 표면의 클램프 지점 근처의 강도입니다. 40 픽셀 아이콘 버튼과 같은 작은 요소의 경우 4 ~ 6 픽셀까지 거리를 조정하십시오; 40 픽셀 버튼의 12 픽셀 오프셋은 그림자를 컨트롤보다 크게 만듭니다.
신형성에 접근할 수 있나요?
기본적으로 아닙니다. neumorphic control's edge 는 표면과 휘도가 몇 퍼센트만 다른 그림자로 정의되며,이는 대화형 구성 요소의 가시적 경계에 대한 WCAG 요구 사항을 충족하지 못합니다.
WCAG 2.2 성공 기준 1.4.11, 비텍스트 대비는 사용자 인터페이스 구성 요소를 식별하는 데 필요한 시각적 정보와 해당 상태를 인접 색상에 대해 최소 3:1의 명암비를 가져야 합니다. 명암비는 에 정의된 상대 휘도 공식을 사용합니다 WCAG 2.2. 기본 사전 설정에 대해 작업 중:
| 쌍 | 상대 휘도 | 명암비 | 3:1을 만나요? |
|---|---|---|---|
어두운 그늘 #bababa 대 표면 #e0e0e0 |
0.491 대 0.745 | 1.47:1 정도 | 아니요 |
밝은 그늘 #ffffff 대 표면 #e0e0e0 |
1,000 대 0,745 | 1.32:1 정도 | 아니요 |
국경 #7f7f7f 대 표면 #e0e0e0 |
0.212 대 0.745 | 3.03:1 정도 | 그냥 |
국경 #767676 대 표면 #e0e0e0 |
0.181 대 0.745 | 3.44:1 정도 | 네, 여백이 있습니다 |
텍스트 #333333 대 표면 #e0e0e0 |
0.033 대 0.745 | 9.6:1 정도 | 예(텍스트의 경우 4.5:1도 통과) |
그리고 그 그림자 형상들이 가장 좋은 경우입니다. 흐림이 그림자 색을 밖으로 퍼뜨려서 보이는 그림자의 대부분은 보다 가볍습니다 #bababa. 강도를 높이는 것은 밝은 표면에서 큰 도움이 되지 않습니다. 하이라이트가 이미 흰색으로 고정되어 있기 때문입니다.
자신의 색상을 확인하려면 색상 대비 검사기 모든 쌍의 비율을 계산합니다 색상 대비 검사 가이드 수식을 자세히 설명합니다.
외관을 유지하고 대비 규칙을 통과하는 방법
스타일을 버릴 필요는 없습니다. 사용자가 인지해야 하는 어떤 것에 대해서도 스타일에 의존하는 것을 멈춰야 합니다.
- 컨트롤용이 아닌 컨테이너용 소프트 UI 사용. 카드, 패널 및 장식용 우물은 순전히 신형일 수 있습니다. 기준 1.4.11은 대화형 구성 요소와 의미 있는 그래픽에 관한 것이므로 콘텐츠가 자신을 식별하는 컨테이너는 가장자리가 존재하는 유일한 기호인 버튼보다 위험이 훨씬 적습니다.
- 모든 대화형 요소에 실제 신호를 제공하세요. 3:1 이상의 색상으로 된 1 또는 2 픽셀 테두리, 대비되는 아이콘 또는 텍스트 레이블.
- 초점을 분명하게 만드십시오. 추가 a
:focus-visible고대비 색상의 윤곽. 부드러운 그림자는 초점 표시기가 아닙니다. - 깊이만으로 상태를 신호하지 마십시오. 누르면 "on" 아이콘, 라벨 또는 색상도 변경됩니다.
- 사용자 설정을 존중합니다. X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 대비 미디어 쿼리를 선호합니다 사용자가 더 많은 대비를 요청할 때 테두리를 추가하거나 효과를 삭제할 수 있습니다.
.neu-button {
border-radius: 16px;
background: #e0e0e0;
box-shadow: 8px 8px 16px #bababa, -8px -8px 16px #ffffff;
border: 2px solid #767676;
color: #333333;
}
.neu-button:focus-visible {
outline: 3px solid #1d4ed8;
outline-offset: 3px;
}
.neu-button[aria-pressed="true"] {
box-shadow: inset 8px 8px 16px #bababa, inset -8px -8px 16px #ffffff;
}
@media (prefers-contrast: more) {
.neu-button { box-shadow: none; border-color: #333333; }
}
단계별로 신형성 CSS를 생성하는 방법
- 열다 신형성 생성기 그리고 시작점으로 사전 설정을 선택하세요: 빛, 카드, 어둠, 누름 또는 볼록.
- 요소가 앉을 배경과 일치하도록 색상 선택기로 표면 색상을 설정합니다.
- 거리를 조정하고 높이와 부드러움을 흐리게 한 다음 대비를 위해 강도를 조정하여 라이브 미리보기를 시청하세요.
- 모양을 선택하십시오: 편평하고, 오목하고, 볼록하거나 눌러지십시오.
- 요소 크기에 맞게 반경을 설정합니다.
- CSS 복사를 클릭하고 규칙에 세 가지 선언을 붙여 넣습니다. 부모에게 동일한 배경색을 부여하는 것을 잊지 마십시오.
밝은 테마와 어두운 테마를 어떻게 지원합니까?
각 테마에 대해 하나의 값 세트를 생성하고 사용자 정의 속성으로 교환하십시오. 위의 Light 및 Dark 사전 설정은 작업 쌍을 제공합니다:
:root {
--neu-surface: #e0e0e0;
--neu-dark: #bababa;
--neu-light: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--neu-surface: #2d2f34;
--neu-dark: #0e1015;
--neu-light: #4c4e53;
}
}
body, .neu-card { background: var(--neu-surface); }
.neu-card {
border-radius: 24px;
box-shadow: 12px 12px 24px var(--neu-dark), -12px -12px 24px var(--neu-light);
}
어두운 신형은 빛 - 표면 문제의 거울을 가지고: 그림자는 검은 색으로 고정하고,하이라이트는 효과를 전달합니다. 각 테마별로 대비를 별도로 확인하십시오.
신형성, 유리형성 및 일반 그림자를 비교했습니다
소프트 UI는 깊이를 보여주는 여러 방법 중 하나이며, 각각 다른 비용이 있습니다.
| 스타일 | 코어 CSS | 깊이 큐 | 대비 위험 | 좋은 |
|---|---|---|---|---|
| 신형성 | 두 반대 box-shadow 레이어, 일치하는 배경 |
페이지에서 밀어내기 | 높은 | 장식 패널, 진열장 대시보드 |
| 유리형성 | backdrop-filter: blur() 그리고 반투명한 충전재 |
내용물 위에 서리가 내린 층 | 중간, 뒤에 무엇이 있는지에 따라 다릅니다 | 이미지 위에 오버레이, 카드 |
| 소재 스타일의 입면도 | 아래쪽으로 한두개 box-shadow 레이어 |
페이지 위에 떠 있는 카드 | 낮은 | 일반 인터페이스 |
| 테두리가 있는 플랫 | border 그리고 채우기 색상 |
없음 | 가장 낮은 | 양식, 밀집된 데이터, 접근성 우선 작업 |
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 유리형성 생성기 반투명 유리 스타일을 구축합니다 박스 그림자 생성기 가이드 단일 및 레이어드 입면 그림자를 커버합니다. 상자보다는 빛나는 또는 양각 텍스트를 위해,the 텍스트 그림자 생성기 비슷한 아이디어를 타입에 적용합니다. 모두 the 에 나와 있습니다 CSS 도구 허브.
발전기는 비공개인가요?
예. 미리 보기와 CSS 는 JavaScript 로 브라우저에서 생성되며,아무것도 업로드되거나 저장되지 않으며,페이지가 로드된 후에도 오프라인으로 계속 작동합니다. CSS 를 복사하면 일일 사용량 한도에 포함되며,해당 한도에 도달하면 메시지가 나타납니다.
