CSS 텍스트 그림자 생성기

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

CSS 텍스트-그림자 생성기,텍스트 그림자 생성기 CSS 도구 또는 CSS 그림자 텍스트 생성기를 검색하든 출력은 동일한 단일 선언입니다. 하드 사전 설정을 클릭하면 생성된 CSS 상자에 텍스트-그림자가 표시됩니다: 2px 2px 0px #00000099; 이는 불투명도가 60%인 하나의 검정색 레이어이며 불투명도는 마지막 두 개의 16진수 숫자로 기록됩니다. 네온 글로우를 클릭하면 7px,14px 및 28px 블러에서 쉼표로 구분된 3개의 레이어를 얻습니다. CSS 복사본은 세미콜론이 포함된 전체 라인을 복사합니다.

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

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

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