ホームページ制作,WEB戦略,効果UP,岡山のニッティグリッティ

お役立ち

ニッティ・グリッティの

お役立ち情報

CSSでネオンサイン(その1)

UPDATE : 2021.10.13

投稿者 : ニッティ・グリッティ

コーディング

CSSでネオンサイン的な表現をしたいこと、ありますよね？

下記サイトでネオンサインを作る方法について紹介されていました。

いろいろと細かい解説もあり、こんなこともできるんだなぁと思いましたので、

例によってゆっくり読んでいきます。

https://css-tricks.com/how-to-create-neon-text-with-css/

まずは、文字を光らせます。

光らせるのは、text-shadowを使います。


.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;
}

text-shadowの書式は、text-shadow: [x-offset] [y-offset] [blur-radius] [color];になりますが、

今回は 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa,・・・となっていますので、

影を文字からずらさずに、だんだん広くなるようにぼかしを重ねていくイメージです。

文字の近くは白色(#fff)、遠くは薄い緑色(#0fa)になっていますので、すこし緑がかった光になります。

できました！

ネオンサイン的な表示にすると、すこしうきうきしますね

つぎは、このネオンサインを明滅させてみましょう！

明滅させるには、アニメーションを使用します


    @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;
  }
}