Box Shadow Generator
Generate box shadows
Generate box shadows 브라우저에서 로컬로 실행됩니다.
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);
About the
Box Shadow Generator는 실시간 미리보기 및 CSS를 사용하여 오프셋, 흐림, 확산, 색상 및 불투명도를 사용하여 그림자를 만듭니다. 사람들이 혼동하는 두 가지 설정은 흐림과 확산입니다. 흐림은 그림자 모양의 바깥쪽과 안쪽으로 가장자리를 부드럽게 하는 반면, 확산은 흐림이 발생하기 전에 그림자 자체의 크기를 늘리거나 줄입니다. 음수 확산은 부드러운 그림자가 후광처럼 보이는 것을 방지하므로 여기서 기본값은 작은 음수 값을 사용합니다.
Where people use the
- 카드, 모달 및 메뉴에 대한 고도 척도를 구축합니다.
- 삽입된 그림자를 사용하여 눌려지거나 초점이 맞춰진 상태를 만듭니다.
- 실제 테두리를 추가하지 않고 테두리를 부드럽게 합니다.
- 디자인 사양의 그림자 값이 실제로 어떻게 보이는지 확인합니다.
How to use the
- 1
오프셋 설정
오프셋 X는 그림자를 오른쪽으로 이동하고, 오프셋 Y는 그림자를 아래로 이동합니다. 음수 값은 반대 방향으로 이동합니다.
- 2
흐림 및 확산 설정
흐림 효과는 가장자리를 부드럽게 합니다. 확산은 흐리게 하기 전에 그림자를 확장합니다. 요소 주위가 아닌 요소 아래에 있는 그림자에 대해 작은 음수 스프레드를 사용합니다.
- 3
색상 및 불투명도 선택
완전 불투명의 순수한 검정색은 거칠어 보입니다. 8~20% 사이의 낮은 불투명도는 먼지라기보다는 깊이로 읽혀집니다.
- 4
내부 그림자를 원하면 삽입을 선택하세요.
Inset은 요소 뒤가 아닌 요소 내부에 그림자를 그립니다. 이는 눌려진 상태와 웰에 적합합니다.
- 5
CSS를 복사하세요
규칙에는 rgba 색상이 포함되어 있으므로 스타일시트에 바로 붙여넣을 수 있습니다.
팁 및 모범 사례
- 두 개의 레이어로 된 그림자가 하나의 무거운 그림자보다 훨씬 좋아 보입니다.
- 광원을 일관되게 유지하십시오. 한 장의 카드가 오른쪽 아래로 던져지면 모든 카드가 그래야 합니다.
- 오버플로가 숨겨진 부모에 의해 그림자가 잘리는 것을 확인하세요.
자주 묻는 질문
흐림과 확산의 차이점은 무엇입니까?
Spread는 부드러워지기 전에 그림자 모양의 크기를 변경합니다. 양수는 증가하고 음수는 축소됩니다. 그런 다음 Blur는 주어진 반경만큼 가장자리를 부드럽게 만듭니다. 카드 아래에 촘촘한 그림자를 얻으려면 약간의 흐림과 약간의 네거티브 스프레드가 필요합니다.
내 그림자가 회색이고 더러워 보이는 이유는 무엇입니까?
불투명도가 높은 순수한 검정색이기 때문입니다. 0.08~0.2 정도의 낮은 알파를 사용하고 그림자를 배경 색조 쪽으로 색조를 지정하는 것이 훨씬 더 자연스럽게 보입니다.
그림자를 두 개 이상 가질 수 있나요?
예. 동일한 선언에서 여러 그림자를 쉼표로 구분합니다. 앞뒤로 쌓이므로 첫 번째가 맨 위에 있습니다. 계층화된 그림자는 얼마나 부드럽고 사실적인 고도가 구축되는지를 나타냅니다.
상자 그림자가 레이아웃에 영향을 미치나요?
아니요. 그림자는 요소의 상자 외부에 그려지며 공간을 차지하지 않으므로 오버플로가 숨겨진 부모 또는 꽉 끼는 컨테이너에 의해 잘릴 수 있습니다.
상자 그림자에 애니메이션을 적용하는 데 비용이 많이 듭니까?
응, 상대적으로. 흐림 또는 확산을 변경하면 브라우저가 매 프레임마다 그림자를 다시 칠하게 됩니다. 부드러운 움직임을 위해 대신 불투명도에 애니메이션을 적용하거나 변환하거나 사전 렌더링된 두 그림자 사이를 크로스페이드하세요.