HTML

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

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

CSS でテキストをネオン風にする方法を紹介します。
例えば、時代を意識した系のサイトを作りたい時に便利な方法です。

  1. テキストをネオン風にする方法
    1. 解説

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

テキストをネオンぽくするには 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,.3);
}
.neon span {
position: absolute;
top: 4%;
left: 8%;
opacity: .3;
}

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

解説

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

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

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

まとめ

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

この記事をシェアする