filter:drop-shadow()を複数適用する

Web > css 2020年1月14日（最終更新：4年前）

2020年1月14日に作成されたページです。
情報が古かったり、僕が今以上のど素人だった頃の記事だったりする可能性があります。

どもです。

CSSで影を付けるといえばbox-shadowですが、近年、透明pngに影をつけたい、疑似要素も含めて影を付けたいなどのニーズに応えるfilter:drop-shadow()が登場しました。

で、以前に書きましたが、影を付ける機能を利用して縁取りをすることができます。
縁取りをするには、1要素に複数のshadowを適用させる必要があります。

box-shadowやtext-shadowは、複数適用する場合、このように書きます。

.pacman{
	box-shadow:4px 4px 0 #ffd900, -4px -4px 0 #ffd900;
}

しかし、filter:drop-shadow()は上記の書き方では構文エラーです。

.pacman{
	filter:drop-shadow(4px 4px 0 #ffd900) drop-shadow(-4px -4px 0 #ffd900);
}

drop-shadowは複数影の適用に対応していませんが、filterが複数フィルターの重ね掛けに対応しているため、複数のdrop-shadowを設定してやることで解決できます。

ただし、drop-shadowの重ね掛けに際して注意点がひとつ。

.pacman{
	filter:drop-shadow(4px 4px 0 #ffd900) drop-shadow(4px 4px 0 #ef9950);
}

drop-shadowはその特性上、要素単位でなく「形」に対して働きます。
故に、後述したdrop-shadowは、前述の「drop-shadowを含んだ輪郭」の上に働くことになります。

これは、重なった分は「重なって」表示されるbox-shadowやtext-shadowと決定的に異なる点です。
これはこれで複数の紙を重ねた表現なんかに使えそう。

この記事は役に立ちましたか？