CSS おれおれ Advent Calendar 2012 – 14日目

こんな感じのもの。

ネオン風に。

基本

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

フォント

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

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

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

text-shadowでぼわーんってな

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

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

影を重ねる

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

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

枠はbox-shadowで

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

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

CSSたくさん書くの、面倒だね

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

デモ

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

おしまい。