CSS filterで複数の効果
create: 2018-10-16
CSS Filter

filter は多重がけできない?

例えば下記のような CSS でblurdrop-shadowを2つ適用しようとしてもうまくいきません。

<img class="cat center dbl-filter" src="/images/site/cat.svg" title="SVGねこ" />
/* ぼかしと影を同時適用できず、最後のフィルタが有効となる */
.dbl-filter {
  filter: blur(3px);
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.6));
}

最後に定義したフィルタが適用されます。
これはfilterという属性を 2 回定義したことと同じなので、CSS のルールに従って最後に定義されたものが有効になります。

1 つの filter 属性に複数の関数を渡す

上記の例は「複数の filter は定義できない」ということではなく、単に指定の仕方が悪いだけです。
1つのfilterに複数の関数を渡すことで問題なく多重がけできます。
下記は弱いblur効果と、青いdrop-shadow効果を同時にかけた例です。

<img
  class="cat center dual-filter"
  src="/images/site/cat.svg"
  title="SVGねこ"
/>
/** 1つのfilterに複数定義する */
.dual-filter {
  filter: blur(3px) drop-shadow(10px 10px 10px rgba(0, 0, 255, 0.6));
}

ちゃんと2つのフィルターをかけられました!

複数のクラスにエフェクトを分割して合成できる?

複数の関数を渡すことで目的は達成できましたが、よく使うエフェクトを「1クラス1エフェクトに分割して、合成する」ことはできませんでした。
クラスの記述前後を反対にしても、CSS 定義が後の方が優先されます。

<img
  class="cat center blur-filter drop-shadow-filter"
  src="/images/site/cat.svg"
  title="SVGねこ"
/>
<img
  class="cat center drop-shadow-filter blur-filter"
  src="/images/site/cat.svg"
  title="SVGねこ"
/>
.blur-filter {
  filter: blur(3px);
}
.drop-shadow-filter {
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.6));
}

これができたら使いまわしやすかったのになぁ。

使いまわしするなら、sassとかlessとかで関数化すると良さそうです。

謝辞

ねこ画像 by 素材 Library.com, Thanks!!