CSSでネオンサインの様にテキストを蛍光色で発光させる方法をご紹介します。

text-shadowプロパティで複数の数値設定をする事で、深みのあるリアルな蛍光色が出せます。

@keyframesを使って蛍光色にちらつきや脈動などのアニメーション効果を付けるとよりリアルになります。

CSSで蛍光色テキストを作る方法

テキストをネオンサインの様な蛍光色に装飾すると、未来的なタッチを加える事ができますよね。

私も前から現場で使ってみたいと思っていました。

この記事ではテキストにネオンサインの様に蛍光色に光る効果を出す方法を紹介します。

さらにCSSとキーフレームを使用して、アニメーションのような動きも付けていきます。

蛍光色に発光させる

まずはテキストを光らせましょう。

これはCSSの「text-shadow」プロパティを使用して実現していきます。

このtext-shadowの優れている点は、コンマで区切って複数のシャドウ効果を適用できる点です。

text-shadowプロパティ

text-shadowのプロパティには4つの値が必要です。

text-shadow: [x-offset] [y-offset] [blur-radius] [color];

シャドウサイズを大きくするには、ぼかし半径を表す3番目の値を大きくするのがセオリーです。

構成ソース

HTML

<div class="dark"> <h1 class="neontext">lpeg</h1> <h2 class="neontext">WEBサイトへようこそ</h2> </div>

CSS

/* darkは背景の共通設定です */ .dark{ margin-bottom: 20px; padding: 20px; text-align: center; background: #010a01; } .neontext { color: #fff; text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; }

サンプル

多くの数値で蛍光に深みを出す

全てコピーしても構いませんが、これらの値がどのように作用しているかはチェックしておきましょう。

まずパッと見て、CSSのtext-shadowスタイルの多さがに気になると思います。

tex-shadowの数値（7つ）

最初の3つの値は、テキストの縁に近い位置で白いぼかし効果となります。

最後の5つの値は、その外側に緑色の輝きを形成するための半径の広いぼかし効果です。

これら全ての値を積み重ねて、発光に深みを加える必要がある訳ですね。

これを少なくするとリアルな蛍光色となりません。

色やぼかし半径サイズを変更する事で、その風合いやバリエーションが変わりますので試してみて下さい。

ネオンサインの様にちらつかせる

特に古いネオンサインでよく見るのが、明かりの「ちらつき」ですよね。

このちらつきはCSSの@keyframesアニメーションで演出する事ができます。

ライトのON・OFFをすばやくランダムに点滅させるアニメーションを作成します。

構成ソース

HTML

<div class="dark"> <h1 class="neontext">lpeg</h1> <h2 class="neontext">WEBサイトへようこそ</h2> </div>

CSS

.dark{ margin-bottom: 20px; padding: 20px; text-align: center; background: #010a01; } .neontext { animation: flicker 1.5s infinite alternate; color: #fff; } @keyframes flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #0fa, 0 0 80px #0fa, 0 0 90px #0fa, 0 0 100px #0fa, 0 0 150px #0fa; } 20%, 24%, 55% { text-shadow: none; } }

サンプル

下のサンプルは見出しのみ点滅し、かつkeyframesの数値を少しいじっています。

CSSによるアニメーション

先ほどと同様に、text-shadowプロパティ値を設定しています。

そして「flicker」などの名前で@keyframesを設定し、タイムラインでシャドウを適用するポイントと、シャドウを解除するポイントを選択していきます。

ポイントは、下のサンプルの様にネオンサインのちらつきを一部分だけに留める事です。

一部分だけのちらつきは、全てのテキストにちらつきを適用した場合よりもリアルに感じられます。

ネオンサインを脈動させる

次は前の様に蛍光色の完全なON・OFFではなく、脈動する様な動きを演出します。

アニメーションの開始時と終了時（100％と0％）で完全に点灯・消灯をさせず、わずかな差を作ります。

このように100％と0％の差を少なくする事で、ぼかし増減が限りなく少なくなり、脈動効果を生み出します。

構成ソース

HTML

<div class="dark"> <h1 class="neontext">lpeg</h1> <h2 class="neontext">WEBサイトへようこそ</h2> </div>

CSS

.neontext { text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; } .pulsate { animation: pulsate 1.5s infinite alternate; } @keyframes pulsate { 100% { text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #0fa, 0 0 80px #0fa, 0 0 90px #0fa, 0 0 100px #0fa, 0 0 150px #0fa; } 0% { text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 10px #0fa, 0 0 45px #0fa, 0 0 55px #0fa, 0 0 70px #0fa, 0 0 80px #0fa; } }

サンプル

ご覧の通り、サンプルが微妙に光っている事がわかります。

微妙なちらつき

さらにちらつきをトーンダウンするとなおリアルになります。

キーフレームのぼかし半径のサイズ差をさらに小さくするだけです。

より微妙なちらつきを演出するためには、ぼかし半径の減少を少なくする代わりにある程度の速度が必要になります。

そこでアニメーションが1秒間に発生する回数を増やす事（0.11s）で実現します。

構成ソース

HTML

<div class="dark"> <h1 class="neontext pulsate">Neon<br>Lights</h1> </div>

CSS

.neontext { color: #fff; text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #f09, 0 0 82px #f09, 0 0 92px #f09, 0 0 102px #f09, 0 0 151px #f09; } h1.neontext { color: #fff; font-size: 3em; line-height: 1em; animation: pulsate 0.11s ease-in-out infinite alternate; } @keyframes pulsate { 100% { text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #f09, 0 0 80px #f09, 0 0 90px #f09, 0 0 100px #f09, 0 0 150px #f09; } 0% { text-shadow: 0 0 4px #fff, 0 0 10px #fff, 0 0 18px #fff, 0 0 38px #f09, 0 0 73px #f09, 0 0 80px #f09, 0 0 94px #f09, 0 0 140px #f09; } }

両者の数値にほとんど差はありません。これが緻密な演出になります。

サンプル

限りなく小さな脈動効果ですが、これが非常にリアルです。

背景画像を使用する

これまでのネオンサインは黒バックでしたが、外壁にぶら下がっているように見せる事ができます。

適当な背景画像を、素材集サイトなどから取得・準備しましょう。

構成ソース

HTML

<div class="dark"> <h1 class="neontext">lpeg</h1> <h2 class="neontext">WEBサイトへようこそ</h2> </div>

CSS

.dark{ margin-bottom: 20px; padding: 20px; text-align: center; background: #010a01; background-image: url("https://cdn.pixabay.com/photo/2017/02/12/12/42/wall-2059909_640.png"); }

サンプル

ネオンサインに境界線を追加する

最後にテキスト周りを丸みのある長方形の境界線で囲む方法です。

こうするとテキスト自体が枠に収まり、実際の看板サインのように見せる事ができます。

境界線にも影を付けることで、テキストと同じネオン効果を出すことができます。

borderプロパティを発光させる

一般的にはborderプロパティで周りに白い実線の境界線を作成し、さらにパディングで余白を作成します。

border-radiusを適用して境界線の角を少し丸めましょう。

次にborderを発光させる訳ですが、borderではtext-shadowが機能しません。

この場合はbox-shadowプロパティを使いましょう。

構文は非常に似ているので、値を微調整する事ができます。

構成ソース

HTML

<div class="dark"> <h1 class="neontext">lpeg</h1> <h2 class="neontext">WEBサイトへようこそ</h2> </div>

CSS

.neontext { color: #fff; text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #bc13fe, 0 0 82px #bc13fe, 0 0 92px #bc13fe, 0 0 102px #bc13fe, 0 0 151px #bc13fe; } h1.neontext { border: 0.2rem solid #fff; border-radius: 2rem; color: #fff; padding: 0.4em; box-shadow: 0 0 .2rem #fff, 0 0 .2rem #fff, 0 0 2rem #bc13fe, 0 0 0.8rem #bc13fe, 0 0 2.8rem #bc13fe, inset 0 0 1.3rem #bc13fe; }

border-boxのCSSに「inset」の設定がされているのにお気づきでしょう。

これを境界線に追加する事で、境界線の内側に出る輝きにリアルな深みを出しているのです。

サンプル

一押し人気コーナー紹介