Line Shadow Text

DEMO

<div class="demo-stage lst-stage">
  <h3 class="lst-text">Shadow<span class="lst-shadow" aria-hidden="true">Shadow</span></h3>
</div>

.lst-stage { display:flex; align-items:center; justify-content:center; padding:2rem 1rem; background:#0B0B10; min-height:260px; }
.lst-text { --lst-c:#E91B89; position:relative; z-index:0; margin:0; font-family:'Oswald',sans-serif; font-size:clamp(3rem, 14vw, 5.2rem); font-weight:700; font-style:italic; line-height:1.1; letter-spacing:.02em; color:#fff; }
.lst-shadow { position:absolute; left:.05em; top:.05em; z-index:-1; color:transparent; pointer-events:none;
  background-image:linear-gradient(45deg, transparent 45%, var(--lst-c) 45%, var(--lst-c) 55%, transparent 0);
  background-size:.06em .06em; -webkit-background-clip:text; background-clip:text;
  animation: lst-move 15s linear infinite; }
@keyframes lst-move { from { background-position:0 0; } to { background-position:1.2em -1.2em; } }
@media (prefers-reduced-motion: reduce) {
  .lst-shadow { animation:none; }
}

AI PROMPT

文字の少し後ろに斜線の模様でできた影を置き、その斜線がゆっくり流れ続ける見出し（Line Shadow Text）をCSSだけで作って。見出しに position:relative と z-index:0 を付け、中に同じ文字を入れた span を aria-hidden="true" で重ねる（読み上げが二重にならないよう、影の側は隠す）。影の span は position:absolute で left と top を .05em ずらし、z-index:-1 で文字の後ろに回す。影の色は透明にして、background-image に linear-gradient(45deg, transparent 45%, 影の色 45%, 影の色 55%, transparent 0) を指定し、background-size を .06em .06em の小さなタイルにして斜線の模様を作る。-webkit-background-clip:text と background-clip:text で、模様を文字の形に切り抜く。@keyframes で background-position を 0 0 から 1.2em -1.2em へ15秒 linear の無限ループで動かし、斜線が流れて見えるようにする（ずらす量はタイル .06em のちょうど20枚分にする。% で指定すると実際のずれが「要素の大きさ − タイルの大きさ」の割合になり、ループの切り替わりで模様が跳ぶため）。影の色はカスタムプロパティ --lst-c で差し替えられるようにする。文字は太めの斜体（Oswald など）で、大きさは clamp で画面幅に合わせる。@media (prefers-reduced-motion: reduce) では流れを止める。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。