ネオンサイン風テキスト
ネオン管が光っているように見える発光テキストです。色付きの光は画像ではなく、 text-shadow を複数重ねて表現しています。にじみの小さい影から大きい影まで段階的に並べることで、芯が白く、外側にいくほどぼんやり光が広がる本物のネオンらしい質感になります。
解説
ネオン管が光っているように見える発光テキストです。色付きの光は画像ではなく、text-shadow を複数重ねて表現しています。にじみの小さい影から大きい影まで段階的に並べることで、芯が白く、外側にいくほどぼんやり光が広がる本物のネオンらしい質感になります。さらに @keyframes で影の強さをわずかに上下させ、ゆっくり明滅する呼吸のような動きを加えています。
こんなページに合います
- バーやナイトクラブ、レトロな80年代風のヒーロー
- ゲームや音楽イベントの告知タイトル
- 暗い背景のLPでアクセントを効かせたい見出し
発光色を変えたいときは text-shadow に並んだ #ff00ea をまとめて別の色にすれば、ピンク以外のネオンにできます。光をはっきり見せるには、背景を必ず暗い色にするのがコツです。明滅の速さは animation の秒数で調整でき、点滅を強くしすぎると目が疲れるため穏やかに保つのがおすすめです。多数の影を描くため、ページ全体で多用せず要点の見出しに絞ると軽快に動きます。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
ネオンの色をピンク以外にできますか？
できます。text-shadow に並んでいるピンク色の指定をまとめて好きな色に置き換えれば、青や緑など別の発光色になります。芯の白い影はそのまま残すと自然に見えます。
明るい背景でも使えますか？
光のにじみは暗い背景でこそ映えます。明るい背景だと発光が見えにくくなるため、見出しの周囲だけでも濃い色の背景を敷くことをおすすめします。