CSS3プロパティ「mix-blend-mode」で画像の間違い探し

この記事は約2分で読めます。

CSS3の「mix-blend-mode」で画像の間違い探しができる。

CSS3ってのはこんな機能もあるんだと感心したのでご紹介。

「mix-blend-mode」というプロパティで要素が重なった場合、どのように色をブレンドするかという指定ができるみたいです。
詳細な説明は下記のサイトを参照。
https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode

PhotoshopやIllustratorで見かける「オーバーレイ」とか「乗算」とか「スクリーン」っていうアレですね。
「どういう場面で使うの？」って思いますが、その一例として２つの画像の「差の絶対値（difference)」で間違い探しができちゃいます。:-)

その前に少しこのプロパティの表示をいろいろと確認してみることにしました。

この２つの画像をブレンドしてみます。

こんな感じ。アイデア次第という感じでしょうか。。。現状ならCSS3でブレンドするよりとりあえずPhotoshopで加工した状態の画像をアップする方が楽な気がします。

それでは２つの間違え探し画像で差分を表示してみたいと思います。

これに「mix-blend-mode: difference」を指定すると、

背景色を#333に指定したので黒いフレームで違う部分が浮き出てみえるような表示になりました。きちゃない。。。
ただ、UIの工夫次第ではいろいろと面白いこともできそうな予感です。

このような二つの画像で違う部分を見つけようと思って「mix-blend-mode: difference;」を指定すると、

この例では「初めて」と「始めて」、「飲む」と「呑む」の２箇所、変換ミスがあることが分かります。
こんなチェックをするケースがあるかは疑問ですがこんな使い方も可能です。