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

tecmemo2105

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

 

今回は、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なんて気にしない!という人は是非どんどん使ってみてはどうでしょう。

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

 

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

CSSの「mix-blend-mode」を使ってみる はコメントを受け付けていません
  • このページを共有する