CSSの「mix-blend-mode」を使ってみる

こんにちは、ウェブラボクリエイターズメモです。

今回は、CSSだけでPhotoshopなどで画像を加工したように見せることができるプロパティ「mix-blend-mode」を紹介したいと思います。

まず、このプロパティでどんなことができるか見てもらう為にDEMOを作成しましたのでそちらをご覧ください。

→DEMO

「mix-blend-mode」を使うとブレンドモード（2つのレイヤーをどのように合成するか）が表現でき、本来Photoshopなどで事前に加工していたものをCSSだけで実現することができます。

また、DEMOで書いてある「乗算」、「スクリーン」などはブレンドモードの種類となります。

各種ブレンドモードの詳細については深く触れませんが、以下に参考文献としてWikipediaのリンクを載せときます。

※全てのブレンドモードが使用できるわけではありません。

→ブレンドモード（Wikipedia）

ではソースの説明をしていきますが、HTML・CSSともにクラスやプロパティの値を変えているだけなので「乗算」部分のみ抜粋します。

■HTML

■CSS

画像の上に単色半透明の疑似要素を乗せ、それを合成することで表現する方法を取りました。

他のブレンドモードごとにCSSを用意してあるのでクラスを変えるだけでブレンドモードが変わるようにしています。

DEMOのリンクを以下にもう一度載せときます。

→DEMO

今回は単色半透明の疑似要素で試しましたが、もちろん画像同士や画像＋テキストも合成することが可能です。

表現の幅がすごく広がりますね！

対応ブラウザですがいつものごとく「Can I use」を参考にさせて頂くと、IEを除くブラウザではほぼサポートされていることが確認できます。

→Can I use

一応IE11で確認してみましたが、すべて要素が単純に上に乗った「mix-blend-mode: normal;」の状態になります。

ですが非常に便利なので、IEなんて気にしない！という人は是非どんどん使ってみてはどうでしょう。

きっと工数削減などに役立つはずです。

以上、クリエイターズメモでした。