CSSで影をつける

PR　当ページのリンクには広告が含まれています。

box-shadow

box-shadow:左右の距離 上下の距離 ぼかし 広がり 色 inset;　で設定します。

insetを付けると、ボックスの内側に影がつきます。

{.box-shadow{box-shadow: 0 0 20px rgba(136, 133, 133, 0.3);
-moz-box-shadow: 0 0 20px rgba(136, 133, 133, 0.3);
-webkit-box-shadow: 0 0 20px rgba(136, 133, 133, 0.3);
-o-box-shadow: 0 0 20px rgba(136, 133, 133, 0.3);
-ms-box-shadow: 0 0 20px rgba(136, 133, 133, 0.3);}

※透過画像のpngにも、その形状ではなく四角く影を落とします。

filter

「filter」はphotoshop等の画像編集ソフトを使わずに、画像をぼかしたり、明度や彩度を変えたり、その他様々な機能を持ちます。そのうちの一つがドロップシャドウです。

セレクタ {    filter: drop-shadow(0 0 4px rgba(136, 133, 133, 0.9));}

「box-shadow」で設定できるinsetは使えません。
こちらもpngやsvgにも使用できます。また、IEでは対応していません。