CSSでネオンサインその2 | ニッティ・グリッティとはマーケティングweb戦略デザイン美容室向け記事 | お役立ち情報 | 岡山のホームページ制作会社。WEB戦略が得意なホームページ成績上げ屋さん！

今回も引き続き、https://css-tricks.com/how-to-create-neon-text-with-css/を読んでいきましょう

前回は、ネオンサインの表現方法(text-shadowを複数かけるのでした)と、明滅の仕方(keyframeでアニメーションさせるのでした)がわかりました。

もし、だんだん暗くなったり明るくなったりしたら、よりリアルですよね。

「鼓動するネオンサイン」として、こんな方法が紹介されています。

    @keyframes pulsate {
  100% {
    /* Larger blur radius */
    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% {
    /* Smaller blur radius */
    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;
  }
}
  

これは前のものとなにが違うのでしょうか？


前のコードをみてみましょう

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

なるほど。前のコードでは、text-shadowを消していたのを、

今回のコードはblurのサイズを変え、100%から0%までだんだん小さくなるようにしているんですね！！

リアルになってきましたね

次はかすかにちらちら光るパターンです

ちらちらと光らせるためには、blur(ぼかし)の範囲の変化を少なくします。

また、アニメーションの間隔も小さくしています。

    @keyframes pulsate {
  100% {
    /* Larger blur radius */
    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% {
    /* A slightly smaller blur radius */
    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;
  }
}

100% 4px →　0%　4pxを筆頭に、わずかに変化していますね。11px　→　10px、19px　→　18px

    
    h1 {
  animation: pulsate 0.11s ease-in-out infinite alternate;    
}
    
    

アニメーションの間隔も、2.5sから0.11sに変わっています

では実際にどうなったか、確認してみましょう。

背景をつけることもできます。unsplashなどからレンガ壁の画像を背景にしてみましょう。

    
    background-image: url("https://source.unsplash.com/LmGT_iY-ykc")

するとこんな感じになりますね。 (フォントはgoogle fontからKaisei Decolを使用しています：https://fonts.google.com/specimen/Kaisei+Decol?subset=japanese)

borderを加えることでさらにネオンサインぽくなります

borderにはtext-shadowが設定できないので、box-shadowで設定します。

inletを使用することでリアルになります

最後に、アクセシビリティにも注意です。

アニメーションを表示しないために下記のようなメディアクエリを加えます。

@media screen and (prefers-reduced-motion){
    div {
        animation:none;
    }
}

最後にCSSでネオンサインをつくるときの方法についてまとめます

1. text-shadowを重ねることでネオンサインが作成できます
2. blur(ぼかし)の半径を変えることでリアルな印象になります
3. animationを設定することで明滅させることができます。
4. animationの間隔を早くし、blurのサイズ変化を少なくすることにより、ちらちらするような表現ができます
5. 背景画像を設定することもできます
6. borderをつけることでネオンサインぽくなります
7. borderにはtext-shadowでなく、box-shadowを使います
8. 表示が重くなることがあるので、prefers-reduced-motionのメディアクエリもつけておく方がいいです

なかなか実際に使うことはなさそうですが、うまく使うことができる場所では効果的な表現かな、と思いました。