box-shadowはもう古い？CSS新時代の「影の落とし方」

長い間Webデザイナーが愛してやまないものの1つに「box-shadow」があります。

Photoshopのような特殊なソフトウェアを使わなくとも、コードだけで影を落とすことができるという点で、Webデザイナーの中で大変重宝されていたプロパティです。

box-shadowの歴史は長く、2005年時点でW3C内でbox-shadowの草案が発表されました。影を落とす時に、影の長さや角度、色や透明度まで指定することができるので、この技術が登場した当初は感動した方も多いのではないのでしょうか。

しかしながら、box-shadowを使った影の落とし方は、登場から10年以上経過した現在、その使い所を考えていく必要があります。それはブラウザが様々なプロパティをサポートしたことが理由であり、影の落とし方を再考してみるのも大切です。

そこで本稿では、CSS新時代の影の落とし方について、考えてみることにしましょう。
　　

いろんなところで活躍した「box-shadow」

box-shadowプロパティは、ボックスに1つ、または複数の影を付ける際に使用するもので、画像処理ソフトを使ってスライスを作らなくても、コードだけで影を落とすことができるので、頻繁に活用している方もいるでしょう。

ここで、box-shadowの使い方をおさらいしておきましょう。

このプロパティでは、例えば以下のように影を指定します。

1. box-shadow: 10px 10px;
2. box-shadow: 10px 10px 10px rgba(0,0,0,0.6);
3. box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.6);
4. box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.6) inset;

通常、影は2～4つの長さで定義されます。また、任意で色やinsetキーワードを追加することもできます。

insetを指定すると、影がボックスの外側ではなく、内側で落とすことができるようになります。長さの指定は省略すると0となり、色の指定は省略するとブラウザの規定値となります。複数の影を指定する場合には、カンマ区切りで影をリスト形式で並べます。
　　

四角形はOK！そのほかの図形には影を上手く落とせない？

box-shadowは短いコードで影を生成することができるので便利ですが、いくつか予期せぬ問題点も発生しています。

例えば、透過PNGにbox-shadowで影を落とす場合です。

box-shadowはあくまでもボックス要素に影を落とすためのプロパティなので、以下のように、画像の周りに上手く影が付きません。

また、SVGの登場で、Web環境にベクターデータを持ち込むことも、次第に増えてきました。

こちらも同様に、四角形であればボックス要素とぴったり当てはまることも多いので、そのままbox-shadowで影を落とせばよいのでしょうが丸や三角形といった、そのほかの図形には四角い影が付いてしまうのです。

filter: drop-shadow()なら万事解決？

そこで登場するのが、filter: drop-shadow()です。

filterプロパティのdrop-shadow()は、W3Cが勧告したフィルターエフェクトモジュールのうちの1つで、一見するとbox-shadowプロパティに似ています。

しかし、実際にはbox-shadowとdrop-shadow()には注目すべき違いがあります。

参考：
Photoshopはもう使わない!? 場所を問わず画像編集できるCSSデザインフィルターの画像編集エフェクト9選｜ferret

まずは、基本的な使い方について確認していきましょう。

filter: drop-shadow()の指定は基本的にはbox-shadowと同じように使ってあげればOKです。括弧の中に指定する値は、box-shadowと同じです。

例えば以下のように指定していきます。

filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));

ただし、insetキーワードはこのフィルターでは指定できないことに留意しておく必要があります。

こうして指定したfilter: drop-shadow()は、PNG画像の透過性やSVG図形にも対応しているので、オブジェクトの形に沿って影を落とすことができます。

対応しているブラウザのサポート状況ですが、Can I useによれば、Internet Explorerを除く最新ブラウザのほぼ全てでCSSフィルターを使えるようになっています（カバー率は2017年11月現在90.38％）。
※ ベンダープレフィックスを除くと74.91％

ただし、このbox-shadowとfilter: drop-shadow()は、似て非なるものです。ぼかしの長さの計算方法や、insetキーワードの使用可否、影の見え方などが異なりますので、ブラウザを使いながら見え方を確認してみるといいでしょう。
　　

filterプロパティを使いこなそう

See the Pen Drop-shadow vs box-shadow (3) en png´s by Ryo Sakai the ferret Web Writer (@ferretxryoxsakai) on CodePen.

今回はfilter: drop-shadow()をご紹介しましたが、CSSフィルターはPhotoshopを使わずとも実に様々な効果を演出することができます。

複数のフィルターを組み合わせる場合のほとんどはフィルターの順序が問われることはありませんが、基本的にフィルターはCSSの行番号の順番に適用されるので、中には他のフィルターを上書きしてしまうものもあります。

また、フィルターはアニメーションにも対応しています。アニメーションを上手に使いこなせば、非常に面白い効果を演出することができます。

例えば、キーフレーム50％のところで影を付けたり、写真をセピア調に変えてドラマチックに演出したりすることも可能です。
　　

まとめ

影の落とし方の選択肢としてbox-shadowだけではなく、filter: drop-shadow()を覚えておけば、状況に応じて使いわけることができるようになります。

実際のところ、前者と後者では役割が違います。しかし、適材適所で使いこなすことができれば、よりリッチな表現を演出することができるでしょう。

CSSフィルターは、影だけではなく、明度や彩度も気軽に変えられることのできる注目技術です。この機会にぜひマスターしてみてはいかがでしょうか。

参考：
Photoshopはもう使わない!? 場所を問わず画像編集できるCSSデザインフィルターの画像編集エフェクト9選｜ferret