「box-shadow」と「filter: drop-shadow」の書き方と注意点[CSS]

CSSで、オブジェクトなどに影を落とす事のできる「box-shadow」について解説致します。

オブジェクトに影をつける事で、立体感が出て、よりリッチなサイトの演出をする事ができるでしょう。

Contents

box-shadowの使い方
box-shadowジェネレーターを利用する
filter: drop-shadowも使いこなそう
- 「filter: drop-shadow」のルール
まとめ

box-shadowの使い方

box-shadowの設定は、以下のようにCSSの記述を行います。

	プロパティ		値
	box-shadow	:	1.左右開始位置	2.上下開始位置	3.ぼかし	4.広がり	5.色	6.内側指定	;
例	box-shadow	:	0px	0px	10px	10px	#333	（なし）	;

各値の間には「半角スペース」が必要ですので、ご注意ください。

左右開始位置

左右開始位置とは、横方向の影をどの位置から伸ばしたいかを決める事ができます。

正の値だと右側、負の値だと左側に開始位置がずれます。

<div style="box-shadow: 50px 0px 0px 20px #333;width: 80%;margin: 0 auto;">正の値なので右にずれます</div>

正の値なので右にずれます

上下開始位置

上下開始位置とは、縦方向の影をどの位置から伸ばしたいかを決める事ができます。

正の値だと下側、負の値だと上側に開始位置がずれます。

<div style="box-shadow: 0px -10px 0px 20px #333;width: 80%;margin: 0 auto;">負の値なので上にずれます</div>

負の値なので上にずれます

ぼかし

3番目の値では、ぼかし具合を決める事ができます。

<div style="box-shadow: 0px 0px 30px 20px #333;width: 80%;margin: 0 auto;">30pxぼかします</div>

30pxぼかします

広がり

4番目の値では、影をどれだけ広げたいかを決める事ができます。

<div style="box-shadow: 0px 0px 0px 20px #333;width: 80%;margin: 0 auto;">20px幅の影</div>

20px幅の影

色

5番目の値では、影の色を指定する事ができます。

今までの例では、ダイレクトに色を指定しておりましたが、透明度を利用できる「rgba」の値を利用する事もできますので、細かい調整を考えると「rgba」で色指定をする方が何かと便利かもしれません。

黄色の影

「rgba」の事がわからない方は、以下の記事よりご確認ください。

: 重ねたオブジェクトをopacityを使わずrgba値で背景色だけを透過する方法【CSS初心者講座】
続きを見る

内側指定

6番目の値は、指定しなくても問題ありません。

ただし、影を内側に落としたい場合には「inset」という値を付与する事で、今まで外側に広がっていた影を内側に広げる事ができます。

<div style="box-shadow: 0px 0px 0px 5px #333 inset;width: 80%;margin: 0 auto;">影を内側に落とす</div>

影を内側に落とす

box-shadowジェネレーターを利用する

CSSの制作する際に役立つ色々な便利ツールが公開されている事もあります。

box-shadowに関しても「box-shadowジェネレーター」という便利なツールが公開されており、このジェネレーターを利用する事で、簡単に影のイメージとコードの排出をする事ができますので、とっても便利です。

慣れてくるとあまり必要もないかもしれませんが、数値の感覚などが慣れていないうちはこういった便利ツールを利用するのもおすすめです。

外部リンク：box-shadowジェネレーター

filter: drop-shadowも使いこなそう

しかし、例えばPNGなどの透過画像にbox-shadowで影をつけた場合はどうなるでしょうか？

.imageboxshadow{box-shadow: 0px 0px 0px 20px #333;}

当然のようにこのような影になりますね。

もちろん、このような形では使い物にならないと思いますので、採用できず、根本的なオブジェクトそのものに影を落とした状態で書き出しをするというやり方をする事になると思います。

しかし、このような時には、「filter: drop-shadow」というのを利用する事で簡単にPNGデータにも影を落とす事ができます。

.imageboxshadow2{filter: drop-shadow(0px 0px 3px red);}

上の画像のように「filter: drop-shadow」を適用させると、影を落とすべきところを画像から勝手に判断し、シャドウの演出をする事ができるようになります。

試しに、上の画像を右クリックで保存してみてください。

影の落ちていない画像で保存されるはずですよ。

「filter: drop-shadow」のルール

「filter: drop-shadow」の効果は、box-shadowと似ていますが、基本的には全く違うものだと認識しておきましょう。

まず第一にプロパティ名が違い、「filter: drop-shadow」は、「filter」プロパティの中の「 drop-shadow」という値をとっているという形になります。

また、box-shadowと違い、若干の記述方法の違いと適用できない要素があります。

「値」は、そのまま書くのではなく、drop-shadow( )の中に書かなければならない
「広がりサイズの指定」ができない
「内側指定」ができない

box-shadowとの違いを以下の表でまとめました。

「box-shadow」と「filter: drop-shadow」の違い
プロパティ		値
	:	左右開始位置	上下開始位置	ぼかし	広がり	色	内側指定	;
box-shadow	:	0px	0px	10px	10px	#333	（なし）	;
filter	:drop-shadow(	0px	0px	10px	使えない	#333	使えない	);