CSSでネオン風のスタイルを作ってみた。（CSS おれおれ Advent Calendar 2012 – 14日目）

こんな感じのもの。

基本

背景色を黒に、文字色を白っぽい色にします。

あとそれっぽいフォントを使いました。

Google Web Fontsの “Grand Hotel” というのを利用しています。

（個別ページってこれで良いのかな。）

テキストに影を付けるやつです。IE 10以上と、モダンブラウザーで利用できます。

影の色を指定できるので、それを文字色と同じ色にすると、ぼやけているように見えます。

text-shadowにひとつだけ指定してもあんまりそれっぽくなかったので、重ねてみました。

影自体が半透過なので、重ねると色が濃くなります。薄くするのは色の指定にアルファ値を含めてやれば良いのですが、濃くするのは重ねるしかない、かなあ。

領域に影を付けるやつです。IE 9以上と、モダンブラウザーで利用できます。

だいたいtext-shadowと同じですが、「矩形の影」ではなく「枠線の影」のようにしたかったので、外側（普通の）と内側（insetを指定）の両方に影を付けています。

なんかSASSなりLESSなりの拡張CSSで関数使うと良いかなあと思います。

マウスカーソルを載せるともっと光るようにしてみました。なんで瞬くようになるのかはよくわかりません。（おしえて！）

おしまい。