CSSでネオンサインその2 | お役立ち情報 | 岡山のホームページ制作会社。WEB戦略が得意なホームページ成績上げ屋さん!

NITTY GRTTY
NITTY GRITTY

お役立ち

ニッティ・グリッティの

お役立ち情報

CSSでネオンサインその2

今回も引き続き、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%までだんだん小さくなるようにしているんですね!!


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


See the Pen Untitled by flying donkey (@sungura) on CodePen.


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


ちらちらと光らせるためには、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に変わっています


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


See the Pen ちらちらひかるネオンサイン by flying donkey (@sungura) on CodePen.


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



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

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



See the Pen 背景つき by flying donkey (@sungura) on CodePen.


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


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

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


See the Pen ちらちら光るネオンサイン 枠付き by flying donkey (@sungura) on CodePen.


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

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



@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のメディアクエリもつけておく方がいいです

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

UPDATE :

投稿者 : AOKI CHISHIO

aoki_icon

無料診断

現状のHPを無料で診断いたします。
お気軽にお問い合わせください。

tel

お問い合わせ

tel


086-959-4456

受付時間 10:00〜17:00定休日/土日・祝日

BLOG

お役立ち情報

© 2021 NITTY GRITTY All Rights Reserved.
WEB GROW
WEB戦略を成功させる
システムできました。

自社で驚くほど簡単に更新・運用ができる!

セキュリーティー万全なWEBの内製化システム

ホームページ改善勉強会 ホームページ改善勉強会 ホームページで失敗しないためのノウハウをセミナー限定で完全公開
© 2021 NITTY GRITTY All Rights Reserved.
無料診断バナー 無料診断バナー