cssで影をおとす「box-shadow」や「filter:drop-shadow」は、何とな～く分かるかな？！くらいの感じでこれまで使ってましたが、影のでき方を色々と試してみる機会があったので記録しておきます。
なお「filter:drop-shadow()」は、IE11以下で対応していません。このページは他のブラウザでお読みくださいませ。
「box-shadow」と「filter: drop-shadow()」の違い
同じように影をつけることができる２つのプロパティですが、以下のように基本的な違いがあるようです。
「filter:drop-shadow()」：要素にあるもの？！に影をつける
png画像で影の違いを比較！
例として「背景色が透明」な２つのpng画像を用意しました。
この画像をdivで囲み「box-shadow」と「filter:drop-shadow()」をつけてみます。
右と下に影がつくよう、htmlで「div」にスタイルを直接指定してます。
html
<div style="box-shadow: 5px 5px 5px gray">
<img src="box-shadow.png">
</div>
<div style="filter: drop-shadow(5px 5px 5px gray)">
<img src="drop-shadow.png">
</div>
左が「box-shadow」、右が「filter:drop-shadow()」の結果です。
ブラウザ表示
「box-shadow」ではdivの要素そのものに影がついてます。
「filter:drop-shadow()」では、divの要素の中の「見えているもの」に影がつきました。
背景が「透明ではない」png画像で比較！
先ほどの画像に「背景色」をつけたpng画像で、同じスタイルを指定してみました。
ブラウザ表示
「box-shadow」では影のつき方に変化はありません。
「filter:drop-shadow」では、背景色を加えた部分には影がつかず、背景色の無い（透明）部分にだけ影がつきました。
このように、名前もちょっと違う２つのプロパティですが、影の仕組みもちょっと違うようです。ここから先、それぞれの使い方について説明してみます。
なお「box-shadow」は、他にたくさんの解説や使用例がありますので、ここでは基礎的な話だけです。
また「filter:drop-shadow()」は、解説というより実験的にやってみた内容をサンプルとして載せています。
「box-shadow」の使い方
「box-shadow」は要素の外側(insetで内側)に影がおとせます。なので値の記述方法が理解できれば、あとは自由に応用できると思います。
ボックスシャドウの基本
「box-shadow」は、ボックス要素（そのもの）に影をつけるプロパティです。cssでは次のように指定します。
○○○○ {
box-shadow: 右(左)px 下(上)px ぼかし量px 影の拡大px 色 内向き;
}
以下、基本的な使用例です。
「box-shadow」～右と下に影～
css
.sample1 {
box-shadow: 10px 10px;
}
- - - 説明 - - -
右 10px
下 10px
ぼかし量 0px
影の拡大 0px
色 自動
内向き 無し
ブラウザ表示
「box-shadow」～左と上に影～
css
.sample2 {
box-shadow: -10px -10px;
}
- - - 説明 - - -
右 -10px
下 -10px
ぼかし量 0px
影の拡大 0px
色 自動
内向き 無し
ブラウザ表示
「box-shadow」～右と下に、ぼかした影～
css
.sample3 {
box-shadow: 10px 10px 10px gray;
}
- - - 説明 - - -
右 10px
下 10px
ぼかし量 10px
影の拡大 0px
色 gray
内向き 無し
ブラウザ表示
「box-shadow」～上下左右に影～
css
.sample4 {
box-shadow: 0px 0px 0px 10px silver;
}
- - - 説明 - - -
右 0px
下 0px
ぼかし量 0px
影の拡大 10px
色 silver
内向き 無し
ブラウザ表示
左右上下に、それぞれ10px影が拡大しています。
「box-shadow」～内側に、ぼかした影～
内向きの影は、値に「inset」を指定します。
css
.sample5 {
box-shadow: 10px 10px 10px 10px pink inset;
}
- - - 説明 - - -
右 10px
下 10px
ぼかし量 10px
影の拡大 10px
色 pink
内向き 有り
ブラウザ表示
「box-shadow」～同時に複数の影～
カンマ「,」で区切れば、２つ以上の影を同時に指定することができます。影の順番は、最初に指定した影から上に表示されます。
css
.sample6 {
box-shadow: 5px 5px orange, 10px 10px 10px gray;
}
- - - 上の影の説明 - - -
右 5px
下 5px
ぼかし量 0px
影の拡大 0px
色 orange
内向き 無し
- - - 下の影の説明 - - -
右 10px
下 10px
ぼかし量 10px
影の拡大 0px
色 gray
内向き 無し
ブラウザ表示
「box-shadow」～影を無くす～
使用する機会は少ないかもしれませんが、元々スタイル指定されている「box-shadow」を打ち消す場合などに使用できます。
css
.sample7 {
box-shadow: none;
}
- - - 説明 - - -
影無しに
ブラウザ表示
以上で「box-shadow」の使い方は終わりです（いっぱい応用して「いい影」作って下さい！）。
次は「filter: drop-shadow()」です。
「filter: drop-shadow」の使い方
「filter: drop-shadow()」は、実際にやってみた限りでの話ですが、「要素そのもの」と「要素の中にあるもの」に影がつきました。
ただ、背景が透明でないとつかないようです。半透明ではつきました、、、。
使い方は「box-shadow」と似ていますので、記述の基本だけ簡単にふれておき、あとは実験的に作ったサンプルをいくつかご紹介します。
「filter:drop-shadow()」の基本
詳しく見ると「filter」がプロパティ、「drop-shadow()」はその関数（フィルター関数）になります。「filter: drop-shadow()」は、いくつもあるフィルター関数の内の１つです。
ドロップシャドウの基本
cssで次のように指定します。基本的な値の指定はbox-shadowと同じです。
○○○○ {
filter: drop-shadow(右(左)px 下(上)px ぼかし量px 色)
}
box-shadowと比較すると、「影の拡大」と「内向き」が指定できません。
またbox-shadowと同じ値を指定しても、実際にできる影は、box-shadowとはちょっと違った見え方をします。
以下、サンプルのご紹介です。画像は使わずhtmlとcssで作成してみました。
「drop-shadow」 ～マウスホバーで影の向きを変化～
HTML
<div class="drop1">
W
</div>
CSS
.drop1 {
width: 150px;
height: 150px;
box-sizing: border-box;
margin: 30px;
color: white;
font-size: 120px;
text-align: center;
border: 10px solid white;
border-radius: 50%;
background: rgba(255, 255, 255, .3);
filter: drop-shadow(8px 4px 6px gray);
transition: 1.0s
}
.drop1:hover {
cursor: pointer;
color: yellowgreen;
border: 10px solid #DCE1E5;
filter: drop-shadow(-8px 4px 6px gray);
transition: 1.0s;
}ブラウザ表示
※マウスホバー時に「文字色」「ボーダー色」「影の向き」を変化させました。
「filter: drop-shadow()」は、背景を透過すれば「それっぽい所」にちゃんと影ができるので、立体的な描画が作りやすいです。
「drop-shadow」 ～マウスホバーでボタンっぽく～
HTML
<div class="drop2">
W
</div>
CSS
.drop2 {
width: 150px;
height: 150px;
margin: 30px;
color: white;
font-size: 120px;
text-align: center;
border: 10px solid white;
border-radius: 50%;
background: rgba(255, 255, 255, .3);
filter: drop-shadow(8px 4px 6px gray);
transition: .7s;
}
.drop2:hover {
cursor: pointer;
color: rgba(0,0,0,0.3);
border: 10px solid rgba(255,255,255,.5);
background: #DCE1E5;
text-shadow: 1px 1px 1px rgba(255,255,255,1);
transition: .7s;
}
.drop2:active {
color: blue;
background: rgba(220, 225, 229, .2);
filter: drop-shadow(4px 2px 2px gray);
}
ブラウザ表示
※マウスホバー時に背景色の透過を無くし、要素内側の影を無くしました。
※マウスホバー時に「text-shadow」を加えました。
※クリックで影と色を少し変化させ「ボタンを押した感」を出しました。
背景の透過を無くすと影がつかないので、その性質を利用してみました。
「drop-shadow」 ～回転した時の影の方向1（影も回転）～
せっかく立体感がでる影なので、要素が動いた時の変化を見てみました。
HTML
<div class="drop3">
W
</div>
CSS
.drop3 {
width: 150px;
height: 150px;
margin: 30px;
color: rgba(0,0,0,0.3);
font-size: 120px;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,1);
border: 10px solid rgba(255,255,255,.5);
border-radius: 50%;
background: rgba(220, 225, 229, .2);
filter: drop-shadow(8px 4px 6px gray);
transition: .7s;
}
.drop3:hover {
transition: 5.0s;
transform: rotate(540deg);
}
ブラウザ表示
※マウスホバー時に、時計まわりに540°回転させました。
回転時の影の動きを見たくて作りました。上の例では影も一緒にまわりました。
回転しても常に同じ角度の影になるよう、改良したものが次のです。
「drop-shadow」 ～回転した時の影の方向2（影は回転せず）～
回転させる要素を親要素で囲み、親要素に影を指定しました。回転させる子要素には影の指定をしません。
HTML
<div class="wrap">
<div class="drop4">
W
</div>
<div>CSS
.wrap {
filter: drop-shadow(8px 4px 6px gray);
}
.drop4 {
width: 150px;
height: 150px;
margin: 30px;
color: rgba(0,0,0,0.3);
font-size: 120px;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,1);
border: 10px solid rgba(255,255,255,.5);
border-radius: 50%;
background: rgba(220, 225, 229, .2);
transition: .7s;
}
.drop4:hover {
transition: 5.0s;
transform: rotate(540deg);
}
ブラウザ表示
※マウスホバー時に、時計まわりに540°回転させました。
影は回転せず、中の要素だけが回転しました（成功～）。
これなら中の要素に動きが加わっても、常に一定の方向から光がさす演出ができそうです。
