box-shadow（ボックスシャドウ）はもう古い？CSSで「影（シャドウ）」を付ける方法

「filter: drop-shadow()（ドロップシャドウ）」なら万事解決？

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

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

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

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

CSS3では、Photoshopのようなフィルター効果を再現するイメージフィルターという機能があります。Photoshopを使用すれば画像加工を行うことができますが、外出先などで画像の編集が行えない……そのような経験、Photoshopを使用するデザイン関連の仕事をされている方なら一度や二度ありますよね。そんな時に、少しのコードをCSSに足すだけで画像編集できてしまう機能がイメージフィルターです。 今回は、画像の明度や彩度などを簡単に調整することができる、CSSイメージフィルターについてご紹介します。

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

*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キーワードの使用可否、影の見え方などが異なりますので、ブラウザを使いながら見え方を確認してみるといいでしょう。