핵심 요점
- 01모든 box-shadow 매개변수는 픽셀 정밀도 조정을 위한 자신의 슬라이더와 숫자 입력이 있습니다.
- 02Inset 토글은 누르거나 뉴모르픽 효과를 위한 드롭 그림자와 내부 그림자 사이를 전환합니다.
- 03색상 및 불투명도는 별도로 제어되어 읽을 수 있는 CSS에 rgba()를 출력합니다.
- 04미리보기는 실제 CSS 속성을 실제 요소에 사용하므로, 보는 것이 스타일시트가 정확히 렌더링하는 것입니다.
시각적 Box-Shadow 생성기를 사용하는 이유
CSS box-shadow는 최대 6개 값을 가집니다. 수평 오프셋, 수직 오프셋, 흐림 반지름, 확산 반지름, 색상, 선택적 inset 키워드입니다. 메모리에서 입력하기는 간단한 그림자에는 작동하지만, 더 미세한 것(팽팽한 글로우, 깊은 드롭 그림자, 부드러운 고도 레이어)에는, 뭔가 보일 때까지 추측하고 다시 로드합니다.
시각적 생성기는 반복 루프를 축약합니다. 슬라이더를 이동하고, 변경 사항을 즉시 확인하고, 만족할 때만 복사합니다. Handytool의 box-shadow 생성기는 완전히 브라우저에서 실행되므로 미리보기는 실제 CSS 속성이 실제 요소에 적용됩니다. 도구와 실제 페이지 사이에 렌더링 차이가 없습니다.
Box Shadow를 디자인하는 방법
- 01
수평 및 수직 오프셋 조정
양수는 그림자를 오른쪽과 아래로 이동합니다. 음수는 왼쪽과 위로 이동합니다. 중앙 그림자(0, 0)는 글로우 효과를 만듭니다.
- 02
흐림 반지름 설정
더 높은 흐림 값은 더 부드럽고 확산되는 그림자를 만듭니다. 0 흐림은 단단한, 고체 그림자 윤곽선을 생성합니다.
- 03
확산 반지름 조정
양수 확산은 흐릿해지기 전에 그림자를 확대합니다. 음수 확산은 축소하므로, 팽팽한 요소 아래 그림자에 유용합니다.
- 04
색상 및 불투명도 선택
색상 선택기로 그림자 색조를 선택한 다음 불투명도를 낮춰 미세함을 조정합니다. 출력은 rgba()를 사용하여 값을 읽을 수 있게 유지합니다.
- 05
필요한 경우 inset 전환
Inset은 드롭 그림자에서 내부 그림자로 전환합니다. 눌린 버튼, 가라앉은 입력, 뉴모르픽 표면에 유용합니다.
- 06
CSS 선언 복사
복사를 클릭하여 전체 box-shadow 값을 잡아서 스타일시트에 붙여 넣습니다.
업로드, 계정 없음
생성기는 완전히 클라이언트 측입니다. 색상 선택, 숫자 값, 미리보기 상태는 브라우저에 머물렀습니다. 아무것도 서버로 전송되지 않습니다. 계정을 생성할 것도 없고 사용 제한도 없습니다.
미리보기 요소가 실제 CSS box-shadow 속성을 사용하므로, 출력은 정의상 정확합니다. 캔버스 렌더링이나 스크린샷 근사가 없습니다. 복사한 픽셀 값이 브라우저가 적용하는 픽셀 값입니다.
Box-Shadow 생성기 FAQ
확산 값이 무엇을 하나요?
양수 확산은 흐림이 적용되기 전에 모든 방향으로 그림자를 확대합니다. 음수 확산은 축소합니다. 낮은 흐림과 쌍을 이루면 팽팽하고 정의된 글로우에 유용합니다.
여러 box shadow를 추가할 수 있나요?
이 생성기는 한 번에 단일 그림자를 출력합니다. 레이어하려면, 값을 복사하고 CSS에서 쉼표로 여러 그림자를 구분합니다. box-shadow는 쉼표로 구분된 목록을 허용합니다.
inset 그림자가 보이지 않는 이유는 무엇인가요?
Inset 그림자는 요소 내부에 그려지므로 표시될 배경색이나 보이는 패딩이 필요합니다. 투명하거나 0 크기 요소에는 나타나지 않습니다.
미리보기가 픽셀 정확한가요?
네, 정확합니다. 미리보기는 실제 CSS box-shadow 속성을 실제 DOM 요소에 사용하므로, 보는 것이 스타일시트가 생성할 정확히 것입니다.
뉴모르픽 그림자란 무엇인가요?
뉴모르픽은 두 가지 그림자(하나 밝음, 하나 어두움)를 사용하여 요소가 평면 표면에서 올라오거나 눌려있어 보이게 합니다. 눌린 변형의 경우 두 그림자 모두 일반적으로 inset입니다.