CSS文字装飾素材

外側の縁は data-text に同じ文字を書いて、後ろに重ねています。文字を変えるときは両方を書き換えてください。

影は text-shadow を斜め下にずらしただけのシンプルな作りです。--cs-off でずらす量を変えられます。

暗い背景で使う文字です。光は text-shadow を重ねて作っていて、ゆっくり明るさが変わります。

ときどき消えかけるネオン看板の動きです。チカチカさせたい文字だけを span で囲んでいます。点滅が苦手な人の設定(視差効果を減らす)では止まります。

1文字ずつ span で囲み、style="--i:0" の数字を 0,1,2… と順番に振ります。数字の分だけ遅れて跳ねます。

style="--n:15" の数字を文字数に合わせてください(句読点も1文字)。日本語の全角文字向けです。もう一度見るときは見本の下の「最初から」を押します。

1文字ずつ span で囲み、--i に順番の数字を振ります。最初の1回だけ動きます。

背景のグラデーションを文字の形で切り抜いています(background-clip: text)。

3色のグラデーションを横に流し続けます。色は3つまで変えられます。

文中の <mark class="cs-tx10"> が画面に入ったときに、左からマーカーが引かれます。1ページにいくつ置いても動きます。

下線は短いインラインSVGです。線を引く動きは最初の1回だけです。線の形を変えたいときは path の d を書き換えます。

1pxずつずらした影を重ねて、厚みを出しています。厚みを増やしたいときは影の行を足します。

白い板の文字の部分だけが透けて、後ろの背景が見えます(mix-blend-mode: screen)。後ろのグラデーションは写真の代わりなので、background を url(…) の画像に差し替えて使います。

文字の上に点を打つ text-emphasis です。強調したい語を <em class="cs-tx14"> で囲みます。点の形は filled sesame(ごま) や filled circle(丸) に変えられます。

吹き出しの文は data-note="…" に書きます。文中のどこにでも置けて、行の高さは崩れません。

3つの言葉が下から順に入れ替わります。言葉の数を変えるときは @keyframes の区切りも合わせて直してください。読み上げ用に、全部の言葉を aria-label に書いています。