こんにちは！ゆぅです！

今回のテーマは「CSS3で影をつけるはじめの一歩」！

前回の角丸に引き続き、CSS3の影をつけるやつを使ってみたいと思います。
IEで使えるPIE.htcではテキストに影をつける(text-shadow)やつは入っていないみたいなので、今回はbox-shadowのみです。

材料

PIE.htc をご用意下さい。
もう持ってる人は必要ないです。PIE.htcについては前々回「CSS3でグラデーションはじめの一歩」を読んでください。

使い方

使い方は影をつけたいcssセレクターにbehaviorの指定でPIE.htcを設定するだけです。

HTML

<div class="btn">ここに影をつけますぞ。</div>

CSS

.btn {
    background: #FB2B75;
    border: solid 1px #FB2B75;

    -webkit-box-shadow:6px 6px 10px #888;/* webkit */
    -moz-box-shadow:6px 6px 10px #888;/* fx */
    /*------PIE setting-------*/
    -pie-box-shadow:6px 6px 10px #888;
     behavior: url(PIE.htc);
    /*------------------------*/
}

影の設定をしているのは5行目からですね。
safari、chrome用の-webkit-box-shadowを設定。
Firefox用の-moz-box-shadowを設定。
そして、IE用の-pie-box-shadowを設定し、behaviorの設定をする。

指定方法は以下。

x軸、y軸のずらし具合は基準点から何pxずらすのかを設定し、
ぼかし具合と影の色を設定。
「,(カンマ)」を入れると二重影(?)を設定したりもできます。

色々やってみたあまり役に立たないデモは下記。

デモを見る

前回、前々回のデモの流用なのでグラデーションも角丸もしてます。

結果

IEでの表示。

※上記のCSSコードでは省略しましたが、グラデーションと角丸もつけてます。

ここ数回にわたってきた「PIE.htc使ってみた」のシリーズですが、ちょっと飽きてき（以下略）、
なのでここで一旦終了したいと思います。来週のネタを探さねば。。。