読了目安時間は約 4 分です。
今回は、CSSで画像や文字などの要素に影をつける方法（ドロップシャドウ）をご紹介します。
目次
要素に影をつけるCSS【box-shadow】
CSSで影をつけるのによく使われるのがbox-shadowです。要素のボックス全体（ボーダーとその内側）に対して影をつけます。
.sample {
box-shadow:（横に影をつける）px （縦方向に影をつける）px （ぼかし量）px （影の拡大）px rgba(影の色と不透明度) 内側指定;
}
例えば
.sample {box-shadow: 2px 2px 4px -2px rgba(0,0,0,0.2) inset}
というように記述します。
影を同時に複数つけることも可能です。
.sample {
box-shadow: 2px 2px 2px #aaa,
3px 3px 5px rgba(255,255,255,0.7) inset;
}
で普通に影をつけつつ、内側に白い影をつけてハイライトを表現できます。
気をつけないといけないのは、要素全体に影がつくので文字だけに影をつけられません。
また、透明PNGやSVGで透明部分を無視して影をつけることができません。
ボックス全体、つまり透明部分を含めて影がかかってしまいます。
文字に影をつけるCSS【text-shadow】
文字だけに影をつけたいときはtext-shadowを使います。テキストだけに影をつけることができます。
.sample {
text-shadow: （横に影をつける）px （縦方向に影をつける）px （ぼかし量）px rgba(影の色と不透明度) ;
}
例えば
.sample {text-shadow: 2px 2px 3px rgba(0,0,0,0.2)}
という感じです。
こちらも影を同時に複数つけることが可能です。
画像の形に合わせた影をつけられる【filter: drop-shadow()】
透明PNGやSVGで、透明部分を無視して画像の輪郭に沿った影をつけたいときはfilter: drop-shadow()です。
.sample{
filter: drop-shadow(（横に影をつける）px （縦方向に影をつける）px （ぼかし量）px rgba(影の色と不透明度) );
}
例えば
.sample { filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.5))}
という風に。
一見すると万能そうなfilter: drop-shadowですが、弱点もあります。
IEでは使えませんし、insetも使えない（内側に影をつけられない）ので、box-shadowと使い分けが必要です。
以上、CSSで影をつける方法あれこれでした。
