CSS 텍스트 그림자 생성기

CSS 텍스트 그림자 생성기는 CSS Text-Shadow 속성의 시각적 편집기입니다. 슬라이더를 사용하여 수평 오프셋, 수직 오프셋, 흐림 반경, 색상 및 불투명도를 조정하고 효과가 샘플 텍스트에서 실시간으로 렌더링되는 것을 보고 정확한 CSS를 복사합니다. 픽셀 값을 추측하고 페이지를 새로 고치는 대신 그림자를 직접 형성하고 생성한 코드를 읽습니다.

텍스트-그림자 속성은 box-shadow 보다 간단합니다 - 확산 반경이 없고 삽입 키워드가 없습니다 - 하지만 레이어링은 강력해지는 부분입니다. 하나의 선언은 여러 그림자를 쌓을 수 있으며,각각은 자체 오프셋,흐림, 색상을 쌓습니다. 레이어를 쌓는 것은 네온 광선,하드 윤곽선,복고풍 3D 글자,편지 인쇄 엠보싱 효과,긴 평면 그림자를 만드는 방법입니다. 손으로 쓰는 것은 까다롭기 때문에 이 도구는 레이어를 관리하고 올바른 페인트 순서로 사양에 맞는 유효한 쉼표로 구분된 선언을 출력합니다.

모든 것이 브라우저에서 발생합니다. 네온 글로우 또는 윤곽선과 같은 사전 설정을 선택하고 각 레이어를 조정하고 밝은 배경과 어두운 배경 사이에서 미리보기를 전환하고 샘플 텍스트를 편집하고 CSS를 복사합니다. 계정이 없고 업로드가 없으며 페이지가 로드되면 오프라인에서 계속 작동합니다.

레이어 순서는 맨 앞에서 맨 뒤로 실행되므로 먼저 나열된 그림자가 맨 위에 놓입니다. 이것이 윤곽선이 작동하게 만드는 이유입니다: 4 개의 작은 그림자가 각 방향에서 한 픽셀을 오프셋하고,쌓아올려 CSS 가 직접 속성이없는 스트로크를 근사화합니다. 흐림 반경은 렌더링하는 데 비용이 많이 드는 부분이며,스크롤에 다시 칠해진 여러 개의 큰 흐림이있는 텍스트는 저전력 장치에서 jank 의 일반적인 원인입니다. 그림자는 레이아웃에 영향을 미치지 않으므로 상자를 오버플로하고 오버플로가 숨겨진 부모에 의해 잘릴 수 있습니다.