透過画像や疑似要素へ影を付けたい時は、
box-shadowではなくfilter: drop-shadow()を使う

前回CSSのプロパティの1つでもあるbox-shadowについて解説しました。
その時に使う注意点として透過画像に使った場合、意図した通りの影にならないといった事を記載していました。

透過画像にbox-shadowをそのまま使うと思っている使い方と違う見え方になってしまい、そのままでは使う事ができないので、画像そのものに影を付けて書き出すという使い方をしている方も多いかもしれません。

しかしながら、box-shadowを使うと透過画像に綺麗な影は付きませんが、今回紹介するfilter: drop-shadow()を使えば、透過画像でも綺麗な影を付ける事が可能になりますので、今回はそんな透過処理された画像にCSSで影を付ける方法について見ていきましょう。

透過画像 × box-shadowはどうなるかをおさらい

filterの解説の前に使い方の前に、まず透過画像にそのままbox-shadowを当てるとどうなるかを見ておきましょう。使う画像は、下記の透過画像になります。

この画像はまだ何も設定はせず画像を表示しただけになっています。
（グレーの背景は透過画像と分かりやすくするため、設定しました。）

この画像にbox-shadowを使って見るとどうなるか確認してみたいと思いますが、その前にbox-shadowを改めて簡単におさらいしておくと、4つの数値とカラー（＋内側の指定かどうか）を入力しますが、左から順に、

• 水平方向の影の位置
• 垂直方向の影の位置
• ぼかす距離（数値が大きいほどぼやける）※省略可能
• 影の大きさ ※省略可能

となります。実際には、insetという設定もあり、それを付ければ影が外側ではなく画像の内側に反映されます。（詳しくは下記の記事を参照ください）

そして、実際に透過画像に下記のbox-shadowの値を設定するとどうなるか見てみましょう。

img{
  box-shadow: 10px 10px 5px 0px #999;
}

設定では、右に10px、下に10px、ぼかしは5px、影の大きさが0pxという設定になっており、実際にその設定を加えたのが下記の画像です。

見てわかるように、思ってた影の付き方ではないのが分かるかと思います。
このように、いつものようにbox-shadowを使って影を付けようとしても、透過された画像の縁に影が設定されるわけではないのです。

画像全体に対してbox-shadowが反映されてしまうため、透過画像かどうかに関係なく影が反映されてしまう仕様になっています。

透過画像に綺麗な影を付ける方法

上記のように表示されてしまうと逆におかしくなってしまうため、透過画像に影を付ける場合はbox-shadowを使って設定するのではなく別の設定で行います。

filter: drop-shadowを使って設定する

cssで透過画像に影を付ける場合は、box-shadowではなく、filterという要素を使って、drop-shadow()を指定して影を付けることで綺麗に反映することができます。

/* 書き方 */
filter: drop-shadow( 10px 10px 5px #999 );

見てもなんとなくイメージできそうですが、実際にbox-shadowの設定と酷似しており、設定の左から順に

• 水平方向の影の位置
• 垂直方向の影の位置
• ぼかす距離（数値が大きいほどぼやける）
• 影のカラー

となっています。
見ても分かるようにbox-shadowと似ていますし、カラーの指定には同じようにrgbaで指定する事もできますが、影の大きさの指定や内側への設定という項目はなく4つの設定項目になります。

実際に先ほどの透過画像にfilter: drop-shadow()の設定を使って表示すると下記のようになります。

img{
  filter: drop-shadow( 10px 10px 5px #999 );
}

こちらを使えば、意図した通りの透過画像への影を付ける事ができます。

透過画像だけでなく疑似要素へも使える

あまりそう多くないかもしれませんが、実は透過画像だけでなく、::beforeや::afterなどの疑似要素へ影を付けようとした場合も注意が必要です。

これも実際に事例を見た方がわかりやすいかと思いますので、下記にサンプルを用意してみました。

疑似要素にbox-shadowを使った場合

まずはよく見る吹きだしの▼の疑似要素にbox-shadowを使ったらどうなるかを見ていきましょう。

<div class="sample-box">Box-Shadow</div>

.sample-box{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 100px;
  margin: 30px 0px 0px;
  color: #999;
  border-radius: 3px;
  background: #ccc;
  box-shadow: 5px 5px 3px 0px #999;
}

.sample-box::after{
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  bottom: -20px;
  left: calc(50% - 15px);
  border-top: 20px #ccc solid;
  border-left: 20px transparent solid;
  border-right: 20px transparent solid;
}

このように、親要素にbox-shadowを付けると、疑似要素に影は付きません。
かといって、疑似要素にも同じようにbox-shadowを付けたとしても、下記のように意図した通りにはなりません。

<div class="sample-box2">Box-Shadow</div>

.sample-box2{
  /* 省略（同じ） */
  box-shadow: 5px 5px 3px 0px #999;
}

.sample-box2::after{
  /* 省略（同じ） */
  box-shadow: 5px 5px 3px 0px #999;
}

疑似要素にfilter: drop-shadowを使った場合

透過画像の時と同じように、疑似要素にもfilter: drop-shadow()を使うと意図した通り綺麗に影が表示されます。

<div class="sample-box3">Box-Shadow</div>

.sample-box3{
  /* 省略（同じ） */
  filter: drop-shadow( 5px 5px 3px #999 );
}

.sample-box3::after{
  /* 省略（同じ） */
}

こちらであれば、意図していた綺麗な影が付くようになりました。
透過画像だけでなく疑似要素を含めたボックスに影を付ける際にも使えます。

まとめ

今回も影を付ける第3弾くらいになるのか、filter: drop-shadow()について解説してきました。

以前に影を付けるといえばこれと言えるbox-shadowを解説していましたが、これだと透過画像などに使うとどうしても意図した通りに影が付かないという事が起こりますが、そんな時にこちらのfilterを使う事で綺麗に縁で影を表示してくれるようになります。

また、同じように透過画像だけでなく疑似要素を含んだボックスに影を使う場合も、透過画像と同じようにこちらを使わなければ意図した影が付かないので、透過画像と疑似要素へ影を付ける場合は、box-shadowではなく、filter: drop-shadow()を使うという事を覚えておきましょう。

基本的な使い方は特に難しい事もなく、box-shadowを使い慣れていればほとんど同じになるので迷う事もありませんので、使い分けをしっかりして綺麗に構築できるようにしておきましょう！