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