box-shadowはCSS3で登場したプロパティで、文字とおりボックスの周りにシャドウを落とすことができます。FireworksやPhotoshop風に伝えるならばドロップシャドウですね。
box-shadowについてまとめられてるサイトはとても多いので、自分的に使っていたものや、今後取り入れておきたいシャドウエフェクトについてまとめてみました。

スポンサーリンク

まずは簡単にbox-shadowのプロパティの中身は以下になります。

css

box-shadow:右方向 下方向 ぼかし 距離 色;

右方向、下方向、ぼかし、距離はpx単位で指定。
色は#000000と値で指定します。rgbaで記述すれ透明度も加えることができます。

css

/*1.外側に影をつける*/
box-shadow: 2px 2px 2px 2px #000;

/*2.内側に影をつける*/
box-shadow: 2px 2px 2px 2px #000 inset;

/*3.外側と内側に影をつける*/
box-shadow: 2px 2px 2px 2px #000, 2px 2px 2px 2px #000 inset;

実際に書くとこうなります。

内側に影をつけたい場合は、insetをつける。(2.参照)
外側と内側両方同時に影をつける場合は、[,]で区切ることで可能になります。(3.参照)

実際に使っていたものと、今後取り入れておきたいシャドウエフェクト

1.右下に影を落としたエフェクト

通常の使い方ですね。
右方向と下方向にあたる数字をマイナスにすると、それぞれが左方向、上方向になります。

サンプルページを表示

html

<div class="box_shadow_1">右下に影</div>
css

.box_shadow_1 {
	box-shadow: 3px 3px 3px #666;
}

2.内側に影を落としたエフェクト

こちらも通常の使い方です。inputやtextareaの装飾などに用いています。
1.の右下に影を落とすエフェクトとは影の位置が異なり、それぞれが左方向と上方向にあたります。数字をマイナスにすると、右方向、下方向になります。

サンプルページを表示

html

<div class="box_shadow_2">内側に影</div>
css

.box_shadow_2 {
	box-shadow: 3px 3px 3px #999 inset;
}

3.外側と内側両方に影を落とすエフェクト

はじめて書いてみました。1.と2.を併せた使い方です。
内側にも影がついているので、立体的なものが浮いているイメージでしょうか。
用途が限られそうな気がしてきました。

サンプルページを表示

html

<div class="box_shadow_3">両方に影</div>
css

.box_shadow_3 {
	box-shadow: 3px 3px 3px #666, 3px 3px 3px #999 inset;
}

4.両端が浮いているように影を落とすエフェクト

こちらもはじめて書いてみました。
擬似要素を利用して、z-indexで後ろに持っていっていたんですね。なるほど。
写真などの画像を多く見せるサイトのギャラリーや、ちょっと装飾をしたいときなんかにはアリだと思いました。

サンプルページを表示

html

<div class="box_shadow_4">両端に影</div>
css

.box_shadow_4 {
    position: relative;
}

.box_shadow_4:before,
.box_shadow_4:after {
    content: "";
    background-color: #333;
    box-shadow: 0 18px 6px #333;
    width: 50%;
    max-width: 270px;
    position: absolute;
    top: 80%;
    bottom: 18px;
    left: 10px;
    transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    z-index: -1;
}

.box_shadow_4:after {
    left: auto;
    right: 10px;
    transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    -o-transform: rotate(3deg);
}

昔はドロップシャドウ用の画像を作って効果を適用させていた気がしましたが、box-shadowでそのあたりがかなりラクになった気がします。

ちなみに、IE8以下では、box-shadowは適用されません。
IE8以下…またお前らか…

PAGE TOP