CSSフィルターができること　～ちょっとした小技編「３」～

1. フィルターのコンビネーション

先ほどはフィルターの種類を一つひとつ紹介していきましたが、フィルターを複数組み合わせることもできます。

例えば、次に紹介するエフェクトは、ぼんやりとしたヴィンテージ風のエフェクトをかけます。フィルターを複数指定するには、半角スペースを空けるだけで大丈夫です。

.vintage {
　filter: contrast(1.4) saturate(1.8) sepia(.6);
　-webkit-filter: contrast(1.4) saturate(1.8) sepia(.6);
}

そうすると、このような形で仕上げることができます。

vintage.png

2. オンマウス(ホバー)したらエフェクトを変える

画像のエフェクトをCSSを使ってかけると、オンマウス(ホバー)したときの画像の見せ方にも工夫を凝らすことができます。
例えば、画像一覧で画像にマウスカーソルを合わせたら、画像の明度が変わる、ということも、次のようなコードで実装することができます。

.grid li img{
　transition: all .2s ease-in-out;
　-webkit-transition: all .2s ease-in-out;
　-moz-transition: all .2s ease-in-out;
　-o-transition: all .2s ease-in-out;
　transform: translateX(0);
　-webkit-transform: translateX(0);
}

.grid li img:hover {
　filter: brightness(50%);
　-webkit-filter: brightness(50%);
}

また、フィルターをリセットしたい場合には、このように指定してあげます。

img:hover{
　filter: none;
　-webkit-filter: none;
}

3. Sassを使った複雑なエフェクトに挑戦

実は、今回紹介したfilterプロパティ以外にも、background-blend-modeプロパティや、mixed-blend-modeプロパティなど、画像にエフェクトをかける様々なフィルターが存在します。

effect.png

Image Effects with CSSでは、こうした様々なフィルターを、Sassと呼ばれるCSSのメタ言語を使って表現する方法を紹介しています。応用編になりますが、これを使うとPhotoshopも顔負けのエフェクトをコーディングだけで実装することができます。興味がある方は、ぜひトライしてみてください。