CSS 상자 그림자 생성기

CSS 상자 그림자 생성기는 CSS box-shadow 속성의 시각적 편집기입니다. 슬라이더를 사용하여 오프셋, 흐림 반지름, 스프레드 반경, 색상 및 불투명도를 조정하고 미리보기 요소에서 결과를 실시간으로 렌더링한 다음 정확한 CSS를 복사합니다. 픽셀 값을 추측하고 페이지를 다시 로드하는 대신 그림자를 직접 형성하고 생성한 코드를 읽습니다.

이 CSS 상자 그림자 생성기를 열고 그것은 카드 사전 설정에서 시작, 두 레이어 상자 그림자로 복사: 0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a;. 불투명도 슬라이더는 육각 색상으로 구워집니다, 그래서 10%는 끝에 1a 가된다. 내부 사전 설정을 클릭하고 선언은 상자 그림자로 변경: 삽입 0px 2px 4px 0px #00000033;, 누른 버튼 모양. 레이어를 추가 0px 4px 6px 0px #00000033, 마지막에 나열하고 다른 사람 아래에 그려진.

Box-Shadow 속성은 믿을 수 없을 정도로 깊습니다. 단일 선언은 각각의 오프셋, 흐림, 스프레드, 색상 및 외부가 아닌 요소 내부에 그림자를 그리는 선택적 삽입 키워드가 있는 여러 그림자를 쌓을 수 있습니다. 실제 인터페이스 그림자는 거의 항상 두 개 이상의 레이어를 사용하여 자연스럽게 보이기 때문에 손으로 쓰는 데 지루합니다. 이 도구는 레이어를 관리하고 쉼표로 구분된 올바른 spec-valid 선언을 출력합니다.

모든 것이 브라우저에서 발생합니다. 사전 설정을 선택하고, 레이어를 조정하고, 밝은 배경과 어두운 배경 사이에서 미리보기를 전환하고, 표준 속성이나 -webkit- 접두어가 포함된 블록을 복사합니다. 계정이 없고 업로드가 없으며 페이지가 로드되면 오프라인에서 계속 작동합니다.

그림자는 상자 밖에 그려져 공간을 차지하지 않으므로 이웃을 밀어 넣지 않으며 오버 플로우가 숨겨진 조상에 의해 잘립니다. 확산은 가장 이해되지 않는 값입니다: 흐려지기 전에 그림자 모양이 커지거나 줄어들기 때문에 흐려짐이 없는 포지티브 확산은 레이아웃에 영향을 주지 않고 테두리 효과가 위조되는 방식인 견고한 오프셋 윤곽을 제공합니다. 삽입은 요소 내부의 그림자를 이동하여 누른 상태와 내부 빛에 유용합니다. 오프셋과 흐려짐이 증가하면서 여러 그림자를 레이어링하는 것은 하나의 큰 흐림이 그림자가 아닌 안개로 읽히기 때문에 설득력 있는 깊이가 구축되는 방식입니다. 각 레이어는 렌더링 시간이 필요하며 스크롤이나 애니메이션 중에 다시 칠하는 그림자는 저전력 장치에서 잰크의 일반적인 소스입니다.