かがやくネオン

2024年8月25日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は、文字をネオン看板っぽく光らせてみようと思います。

ぜひダークモードにしてお楽しみください。

ネオン風エフェクトまとめ

参考：Workship MAGAZINE｜ネオン風Webデザイン事例12選！おしゃれなBARからSFチックなものまで

参考：coliss｜CSSで美しいネオンライトのエフェクトをテキストやボタン、ボーダーに実装するテクニックのまとめ

どれもオシャレですね！

早速パクっ参考にして作ってみましょう。

光る

まずテキストを用意します。

<h1 class="text-neon1">CHEMIST</h1>

CSSでtext-shadowを設定します。

.text-neon1 {
  color: #fff;
  font-weight: 400;
  text-shadow: 0 0 4px #fff,
               0 0 8px #fff,
               0 0 12px #fff,
               0 0 16px #228DFF,
               0 0 28px #228DFF,
               0 0 32px #228DFF,
               0 0 40px #228DFF,
               0 0 60px #228DFF;
}

参考にしたサイトでは文字の大きさが7em（112px？）に対してtext-shadowを0 0 10px, 0 0 20px・・・としていたので、今回はh1（2.5rem=40px）に対して上記のような数値にしてみました。

数値を半分にすると・・・

.text-neon2 {
  color: #fff;
  font-weight: 400;
  text-shadow: 0 0 2px #fff,
               0 0 4px #fff,
               0 0 6px #fff,
               0 0 8px #228DFF,
               0 0 14px #228DFF,
               0 0 16px #228DFF,
               0 0 20px #228DFF,
               0 0 30px #228DFF;
}

ちょっと輝きが控え目になりましたね。いやむしろ輝きが増してる？

明滅する

さっきの2つを交互にアニメーションさせてみます。

.text-neon3 {
  color: #fff;
  font-weight: 400;
  -webkit-animation: neon-flicker 1.5s ease-in-out infinite alternate;
  -moz-animation: neon-flicker 1.5s ease-in-out infinite alternate;
  animation: neon-flicker 1.5s ease-in-out infinite alternate;
}

@-webkit-keyframes neon-flicker {
  from {
    text-shadow: 0 0 4px #fff,
                 0 0 8px #fff,
                 0 0 12px #fff,
                 0 0 16px #228DFF,
                 0 0 28px #228DFF,
                 0 0 32px #228DFF,
                 0 0 40px #228DFF,
                 0 0 60px #228DFF;
  }
  to {
    text-shadow: 0 0 2px #fff,
                 0 0 4px #fff,
                 0 0 6px #fff,
                 0 0 8px #228DFF,
                 0 0 14px #228DFF,
                 0 0 16px #228DFF,
                 0 0 20px #228DFF,
                 0 0 30px #228DFF;
  }
}
@-moz-keyframes　neon-flicker {
  from {
    text-shadow: 0 0 4px #fff,
                 0 0 8px #fff,
                 0 0 12px #fff,
                 0 0 16px #228DFF,
                 0 0 28px #228DFF,
                 0 0 32px #228DFF,
                 0 0 40px #228DFF,
                 0 0 60px #228DFF;
  }
  to {
    text-shadow: 0 0 2px #fff,
                 0 0 4px #fff,
                 0 0 6px #fff,
                 0 0 8px #228DFF,
                 0 0 14px #228DFF,
                 0 0 16px #228DFF,
                 0 0 20px #228DFF,
                 0 0 30px #228DFF;
  }
}
@keyframes neon-flicker {
  from {
    text-shadow: 0 0 4px #fff,
                 0 0 8px #fff,
                 0 0 12px #fff,
                 0 0 16px #228DFF,
                 0 0 28px #228DFF,
                 0 0 32px #228DFF,
                 0 0 40px #228DFF,
                 0 0 60px #228DFF;
  }
  to {
    text-shadow: 0 0 2px #fff,
                 0 0 4px #fff,
                 0 0 6px #fff,
                 0 0 8px #228DFF,
                 0 0 14px #228DFF,
                 0 0 16px #228DFF,
                 0 0 20px #228DFF,
                 0 0 30px #228DFF;
  }
}

ベンダープレフィックスもいるみたいです。

ダークモード時のみ

普段は黒い文字で、端末でダークモードに設定した時と.dark-themeが付与された場合のみ光らせるようにしてみます。

@media(prefers-color-scheme: dark) {
.text-neon4 {
  color: #fff;
  font-weight: 400;
  -webkit-animation: neon-flicker 1.5s ease-in-out infinite alternate;
  -moz-animation: neon-flicker 1.5s ease-in-out infinite alternate;
  animation: neon-flicker 1.5s ease-in-out infinite alternate;
}
.light-theme .text-neon4 {
  color: #000;
  animation: none;
}
.dark-theme .text-neon4 {
  color: #fff;
  font-weight: 400;
  -webkit-animation: neon-flicker 1.5s ease-in-out infinite alternate;
  -moz-animation: neon-flicker 1.5s ease-in-out infinite alternate;
  animation: neon-flicker 1.5s ease-in-out infinite alternate;
}
}
.dark-theme .text-neon4 {
  color: #fff;
  font-weight: 400;
  -webkit-animation: neon-flicker 1.5s ease-in-out infinite alternate;
  -moz-animation: neon-flicker 1.5s ease-in-out infinite alternate;
  animation: neon-flicker 1.5s ease-in-out infinite alternate;
}

まとめ

フォントを変えるとまた違った印象になると思います。

トレインワン

Orbitron

Pacifico

VDL-ラインGアール-POP ※Adobe Fonts

縁取り文字（袋文字？）にするとよりネオンっぽくなりますね！

本当は文字ごとに色を変えたりしたかったのですが、途中に<span>を入れると表示が崩れてしまったのであきらめました。