CSS テキストグリッチ効果ジェネレーター
控えめなずれ文字のグリッチ効果を作成してローカルでプレビューし、動きを減らす設定への代替を含む短い HTML と CSS をコピーします。
最大 80 文字。コピーされる HTML では、この値をテキスト内容と CSS 疑似要素用の data-text 属性の両方に保存します。
サイクルを遅くすると急速な点滅を防げます。
ライブプレビュー
オフセット文字レイヤー
SIGNAL LOST
アニメーションは装飾用です。プレビューには読み上げ可能なテキストノードを 1 つ残し、色付きレイヤーは CSS 疑似要素で描画します。
生成 CSS は ::before と ::after で content: attr(data-text) を使用します。内容を動的に変更する場合は、表示テキストと data-text を同期してください。prefers-reduced-motion に配慮し、重要な内容にアニメーションによる歪みを使わないでください。
使い方
使い方
- 表示文字を入力し、メイン、左オフセット、右オフセットの色を選びます。
- 読みやすいレイヤー状のプレビューを見ながら、オフセットの強さと周期速度を調整します。
- HTML と CSS をコピーし、プロジェクトで文字を変更するときはテキストと data-text 属性を同期します。
控えめな CSS のみのずれ効果
可視テキストノード 1 つと、対照的にずれた CSS 擬似要素 2 つを生成します。短い 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、メディアクエリーに対応しますが、フォント描画やアンチエイリアスには差があります。対象のブラウザーと画面サイズで最終効果をテストしてください。