ど素人から毛を生やす。<延>

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

Web > css 2020年1月14日(最終更新:8月前)

どもです。

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と決定的に異なる点です。
これはこれで複数の紙を重ねた表現なんかに使えそう。


○お借りしました
[mororeco]CSSでいろんなカタチを表現してみる

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)