【CSS3】CSSで作れるネオンカラーの実装方法


こんにちは！
MS部の原田です。

 

今回はどこかに行きましたー！みたいな充実した話のネタが特に無かったので、
福岡拠点らしくWeb制作に関することをお話しできればと思います！笑

 

タイトルにある通りネオンカラーをCSSで実装する方法についてお話ししていきたいと思います！
（少し前に流行って今更感はあるのですが個人的に大好きなのでご了承ください。。笑）

 

まずはデモを見ていきましょう！

デモ

それでは解説していきます。

 

HTML

<div class="neon">
 <p>GEO BRAIN</p>
</div>

HTMLはシンプルなdivとpの括りのみになります。
クラス名は何でも良いですがここではneonとクラスを付けています！

 

CSS

body{
  margin: 0;
}

.neon{
  min-height: 100vh;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.neon p{
  background: transparent;
  font-family: futura,sans-serif;
  font-size: 52px;
  color: #21cbff;
  letter-spacing: 4px;
}

まずはネオンカラーに必要不可欠な黒背景とネオンカラーっぽい色をテキストに設定します。
見やすいようにflex等で中央寄せに調整（ほんとflex便利ですね。。）
フォントは自分の大好きなfuturaを設定しました！

 

ここでネオンカラーに見せるコツですが、
CSS3で登場したbox-reflectとtext-shadowを使うことで綺麗なネオンカラーを実現できます！

 

まずbox-reflectは要素を反射させることができるプロパティになります！
反射効果は、幅やmargin、paddingなどの影響を受けず、突き抜けるような形になるので調整要です！

 

続いてtext-shadowですが、テキストに影をつける際に使用するプロパティになり、
このプロパティがネオンカラーに見せる最重要ポイントになります！

まずtext-shadowにはスペース区切りで<水平方向の距離> <垂直方向の距離> <影のぼかし半径> <影の色>を指定することができます。 長さの値には、pxやemやexなどの単位が利用できます。

ネオンカラーに見せるコツとしては<水平方向の距離> <垂直方向の距離>は動かさず <影のぼかし半径>のみで影の大きさを調整することにあります！
また、 <影の色>は最初に設定したテキストの色を設定してくださいね！

 

それではテキスト部分（.neon p）にbox-reflectとtext-shadowを追加！

.neon p{
  background: transparent;
  font-family: futura,sans-serif;
  font-size: 52px;
  color: #21cbff;
  letter-spacing: 4px;
  -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
  text-shadow: 0 0 30px #21cbff;
}

 

まとめ

いかがでしたか？
ネオンカラーの実装は意外と簡単に作れるんです！
黒背景がメインのページや少しおしゃれに見せたい時に使えるかもしれないのでぜひ参考にしてくださいね！

 

次回はSS部　徳永さんです。
よろしくお願いいたします！

 

+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-+:-+:-+:-+:-+
ブログを見ていいね！したくなった方はこちら…
－ジオブレインfacebook－
http://www.facebook.com/GeoBrainCorporation
もっとジオブレインの仕事内容を知りたくなった方はこちら…
－ジオブレインHP－
http://www.geo-brain.com/
+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-+:-+:-+:-+:-+


Related posts