HTML

CSS テキストをネオン風にする方法

CSS テキストをネオン風にする方法

CSS でテキストをネオン風にする方法を紹介します。
例えば、近未来的なサイトを作りたい時に便利な方法です。

  1. テキストをネオン風にする方法
    1. 解説
  2. 点滅アニメーションを追加する

テキストをネオン風にする方法

テキストをネオンぽくするには webkit-text-stroke を使用します。
実際の見た目はこんな感じになります。

ベースとなるHTMLとCSSの指定は次のようになります。

<span class="neon">日<span>日</span></span>
<span class="neon">本<span>本</span></span>
<span class="neon">語<span>語</span></span>
.neon {
position: relative;
display: inline-block;
color: transparent;
-webkit-text-stroke: 1.5px #0f0;
text-shadow: 0 0 50px rgba(0,255,0,.5);
}
.neon span {
position: absolute;
top: 4%;
left: 8%;
opacity: .3;
}

上記はネオン表現のみの指定なので、文字サイズを変更するときは任意の値を追加してご利用ください。

解説

まずは対象のテキストを一文字ずつ span で囲みます。
テキストの縁取りには webkit-text-stroke を使用。
縁取りの強調と、次に追加する「光が滲んだ感じ」を出すために、color: transparent; を指定して塗りを透明にします。
続いて光が滲んでいる感じを出すために text-shadow でぼかしを加えます。

次に、文字に影を追加して、よりそれらしく見えるように調整します。
span で囲った中に同じ文字を追加してその文字も span で囲います。
<span>日<span>日</span></span> こんな感じ。

影は光の方向からずれて見えるので、位置をずらすために position: absolute; を追加、top と left を指定して位置をずらします。
この時の親要素には position: relative; の指定をお忘れなく。
最後に opacity でちょっと透過して完成です。

点滅アニメーションを追加する

雰囲気を出すためネオンを点滅させる場合は animation を使用します。
ベースとなるHTMLとCSSの指定は次のようになります。

<span class="neon flash">日<span>日</span></span>
<span class="neon flash">本<span>本</span></span>
<span class="neon flash">語<span>語</span></span>
.flash {
animation: flash-anime 5s linear infinite;
}
@keyframes flash-anime {
0% {opacity: 1;}
50% {opacity: 1;}
51% {opacity: 0.3;}
52% {opacity: 1;}
75% {opacity: 1;}
76% {opacity: 0.6;}
77% {opacity: 1;}
78% {opacity: 0.3;}
79% {opacity: 1;}
}

最初に紹介したクラスに .flash を追加します。
点滅は適宜変更を加えてご利用ください。
個人的には「パッ、パパッ」って間隔でアニメーションをつけるのが好きなので、紹介している設定はそのようにしています。
アニメーションの時間を伸ばすと(作例では5秒間のループ)、点目の瞬間が長くなるので、秒数に合わせて点滅の間隔や透明度を変更してください。

まとめ

CSS でテキストをネオン風にする方法を紹介しました。
割と簡単に実装できるので、ネオン風の画像作りが面倒臭い時に便利な方法です。
animetion 要素を追加して、光を点滅させてもよいかもしれません。