参考サイト：http://hallofhavoc.com/2011/03/cool-text-effects-using-css3-text-shadow/
コピペで出来るネオン効果は、テキストシャドウを使う
今回はテキストリンクに対し、ネオンの様にシャドウを付ける方法をご紹介します。
テキストリンクにはそれぞれ以下の様な指定があります。
※初心者の方であっても分かりやすいように書いていますので、中級者以上の方は必要部分だけ読んで下さい。
a:link 未訪問リンクのスタイルを指定
a:visited 訪問済みリンクのスタイルを指定
a:hover ユーザーの操作で要素にカーソルなどが乗った際のスタイルを指定
a:active ユーザーの操作で要素がアクティブになった際のスタイルを指定
さらにリンクの基本を知りたい方はこちら
http://www.htmq.com/selector/hover.shtml
テキストリンクの上にカーソルが乗った時にアンダーラインが付いたり、テキストリンクの色に変化が起きたりするのは、この「a:hover」に対してスタイルを指定することで実現します。
例えば
<p class="test1"><a href="#">LINK</a></p>
これはリンク付きのパラグラフに対して「test1」というクラス名を付けています。
このリンクに対してcssスタイルを指定するならば、
.test1 a:link{ }
.test1 a:hover{ }
といったやり方になります。
こんな感じですかね。
See the Pen oYPrPd by oje-aje (@oje-aje) on CodePen.
では本題に入ります。
テキストシャドウ効果を使ったcssの解説
以下のテキストシャドウ効果を使った例についてcssの解説をします。
See the Pen GNXaBO by oje-aje (@oje-aje) on CodePen.
text-shadow: 0 0 10px #000
これは左の数字から
0…水平に移動する距離の指定
0…垂直に移動する距離の指定
10px…ぼかし（数字が大きくなるほどボケ足が広がる）
#000…シャドウのカラー
となります。
この指定は重ねることが出来るため、もっと精度を上げて美しいシャドウに仕上げることもできます。
See the Pen QGVRJz by oje-aje (@oje-aje) on CodePen.
ちょっと前まではcssでこのようは表現は不可能だったため画像に頼るほかありませんでしたが、現在はcss3で様々な表現方法が出来てとても便利です。今回はテキストリンクに対する紹介ですが、もちろんテキストリンク以外の文字列にも使えます。
また、スマホなどモバイルユーザーをメインにしたサイトはカーソルを載せるという概念が無いため、「hover」に対する指定はあまり意味をなさない場合があります。今後の時代に合った新たな見せ方の工夫が必要かもしれません。
