CSS 텍스트 효과 생성기

대부분의 CSS 텍스트 효과 갤러리에서는 고정된 사전 설정을 제공합니다. 하나는 네온 발광, 하나는 3D 돌출입니다. 선택하거나 그대로 두세요. 이 생성기는 사용자가 실제로 입력하는 텍스트 대신 매개변수를 사용하여 CSS를 작성합니다. 효과 선택에서 네온 글로우, 3D 돌출, 활판 인쇄/엠보스, 윤곽선 또는 그래디언트 채우기를 선택하고 해당 효과의 자체 컨트롤을 조정하면 실시간 미리 보기와 그 아래에 있는 복사 가능한 CSS 블록이 변경될 때마다 업데이트됩니다.

3D 돌출 효과는 이해할 가치가 있는 효과입니다. 선택한 깊이(겹쳐진 레이어 수)와 각도에 대해 레이어 i는 가로로 i × cos(각도), 세로로 i × sin(각도)만큼 오프셋되며 실제 삼각 함수를 사용하여 JavaScript에서 계산됩니다. 미리 설정된 각도의 조회 테이블에서 읽히지 않습니다. 45도에서는 수평 및 수직 오프셋이 모든 레이어에서 동일하게 나타납니다. 45°의 코사인과 사인은 동일한 값이기 때문입니다. 각도 슬라이더를 회전하여 '텍스트 그림자' 레이어의 전체 스택이 실시간으로 글자 주위를 흔들리는 것을 확인하세요. 각 레이어는 마지막보다 조금 더 어두워져 조명이 켜진 3D 얼굴을 가짜로 만듭니다.

네온 글로우는 선택적인 깜박임과 함께 선택한 색상의 흐림 반경이 증가하는 4개의 '텍스트 그림자' 레이어를 스택합니다. 이 옵션을 켜면 불투명도 딥의 무작위 시퀀스가 포함된 '@keyframes' 규칙이 생성되어 실시간으로 애니메이션화되고, 셔플 버튼을 사용하면 단일 키프레임을 직접 작성하지 않고도 패턴을 다시 롤링할 수 있습니다. 윤곽선 텍스트는 이를 지원하는 브라우저에 `-webkit-text-Stroke`를 적용하고 그렇지 않은 브라우저에는 정직한 8방향 `text-shadow` 대체를 적용합니다. 두 줄 모두 복사된 CSS에 이유에 대한 메모와 함께 제공됩니다. 그라데이션 채우기는 이제 광범위한 지원을 제공하는 표준 속성인 '배경 클립: 텍스트'를 사용하여 텍스트 모양에 '선형 그라데이션'을 클립하며 레거시 엔진에 대해 이전 '-webkit-' 접두사가 붙은 줄을 유지합니다.

모든 것이 브라우저에서 로컬로 렌더링됩니다. 입력한 텍스트는 어디에도 전송되지 않습니다. 효과에 필요한 경우 '@keyframes' 규칙을 포함하여 완성된 CSS 블록을 스타일시트에 바로 복사하세요.