こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は、CSSだけで“未来感のあるホログラム文字”を作る方法をご紹介します。
光が屈折して見えるような立体感のある文字は、ヒーロー系・SFサイト・ガジェット系のLPなどでも使える万能テクニックです。
しかも、仕組みさえ知れば驚くほどシンプル。
この記事では、基本の仕組みから、すぐコピペで使える実装例、そして応用テクニックまで丁寧にまとめました。
Web制作に取り入れると、ぱっと見で「おっ、カッコいい！」と思ってもらえる演出になるので、ぜひ試してみてください。
ホログラム文字の仕組み
ホログラム文字のポイントはこの3つです。
・複数の色を重ねてズラす
・光の線（反射）を加える
・グラデーションで未来感を演出
これらを同時に使うことで、まるでSF映画に出てくるような立体的なテキストが作れます。
- color でメインの文字色を薄めに設定
- text-shadow で青・赤系の光をズラして重ねる
- mask-image や background-clip で光沢を演出
ホログラムは「ズレ」「光沢」この2つだけで表現できます。
基本のホログラムテキスト
まずは最もシンプルなホログラム文字のコードです。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このコードでは、青とピンクのシャドウを左右にズラし、ホログラム特有の「色ズレ」を再現しています。
さらにグラデーションをかけることで、文字の中に淡い光が流れるような効果が出せます。
反射ラインが通り抜けるホログラム
さらに未来感を強くしたい場合は「光のライン」を横切らせます。
これは疑似要素とマスクを使うと簡単に実現できます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
光の筋がスーッと横切ることで、
“立体的で透き通ったホログラム感”が強調されます。
応用：ネオンと組み合わせる
ホログラム文字は、ネオンと組み合わせると一気にサイバー感がアップします。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
ホログラムの「色ズレ」とネオンの「光のにじみ」が混ざることで、
SF映画のUIのような幻想的なスタイルになります。
まとめ
ホログラムテキストは、
・色ズレ
・光沢
・グラデーション
この3つさえ押さえれば、CSSだけで驚くほど未来的な表現ができます。
UIやバナーのアクセント、メインビジュアルにも相性バツグン。
ほんの少しの工夫で、あなたのデザインは一段階上の世界観を持たせられます。
ぜひ、制作に取り入れてみてください。