CSS 텍스트 글리치 효과 생성기
절제된 오프셋 텍스트 글리치 효과를 만들고 로컬에서 미리 본 다음 동작 감소 대안이 포함된 작은 HTML 및 CSS 패턴을 복사하세요.
최대 80자입니다. 복사된 HTML은 이 값을 텍스트 콘텐츠와 CSS 의사 요소용 data-text 속성에 모두 저장합니다.
주기가 느릴수록 빠른 깜박임을 피할 수 있습니다.
실시간 미리보기
오프셋 텍스트 레이어
SIGNAL LOST
애니메이션은 장식용입니다. 미리보기에는 읽을 수 있는 텍스트 노드 하나가 유지되고 색상 레이어는 CSS 의사 요소로 표시됩니다.
생성된 CSS는 ::before 및 ::after와 content: attr(data-text)를 사용합니다. 콘텐츠가 동적으로 바뀌면 보이는 텍스트와 data-text를 함께 업데이트하세요. prefers-reduced-motion을 준수하고 중요한 콘텐츠에는 애니메이션 왜곡을 사용하지 마세요.
사용 방법
사용 방법
- 표시할 텍스트를 입력하고 기본, 왼쪽 오프셋, 오른쪽 오프셋 색상을 선택합니다.
- 읽기 쉬운 레이어 미리보기를 확인하며 오프셋 강도와 반복 속도를 조절합니다.
- HTML과 CSS를 복사하고 프로젝트에서 텍스트를 바꿀 때 data-text 속성도 함께 업데이트합니다.
절제된 CSS 전용 오프셋 효과
생성기는 보이는 텍스트 노드 하나와 대비되는 오프셋을 가진 CSS 의사 요소 둘을 만듭니다. 짧은 clip-path 변화가 의도적으로 느린 주기에서 가끔 왜곡을 일으키므로 빠르게 깜박이지 않습니다. 표준 CSS 속성을 사용하며 canvas, 이미지, SVG, 외부 글꼴, 스타일시트, 스크립트 요청이 필요하지 않습니다.
접근성 있는 텍스트와 data-text 제한
실제 텍스트는 문서에 남고 의사 요소는 attr(data-text)에서 내용을 가져옵니다. CSS는 일반 텍스트를 해당 속성에 자동으로 복제할 수 없으므로 텍스트를 변경할 때 두 값을 함께 업데이트하세요. 복사된 CSS에는 prefers-reduced-motion이 포함되어 애니메이션을 멈추고 정적인 낮은 불투명도 오프셋 표현을 남깁니다. 움직임 효과는 장식으로만 사용하고 중요한 지침, 상태 또는 시간에 민감한 정보는 왜곡되는 텍스트에 넣지 마세요.
자주 묻는 질문
더 알아보기
HTML에서 data-text에 텍스트를 반복하는 이유는 무엇인가요?
CSS 의사 요소는 요소의 텍스트 노드를 직접 복제할 수 없습니다. data-text 속성이 attr(data-text)로 내용을 제공하고 실제 요소 텍스트는 읽을 수 있는 HTML로 남습니다.
동작 감소 설정에서 메시지가 사라지나요?
아니요. 기본 텍스트는 계속 보입니다. 생성된 reduced-motion 규칙은 의사 요소 애니메이션을 멈추고 안정적이며 절제된 오프셋 표현을 남깁니다.
모든 브라우저에서 똑같이 보이나요?
최신 브라우저는 생성 콘텐츠, transform, clip-path, 미디어 쿼리를 지원하지만 글꼴 렌더링과 안티앨리어싱은 다를 수 있습니다. 사용자가 쓰는 브라우저와 화면 크기에서 최종 효과를 테스트하세요.