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で見かける「オーバーレイ」とか「乗算」とか「スクリーン」っていうアレですね。
「どういう場面で使うの?」って思いますが、その一例として2つの画像の「差の絶対値(difference)」で間違い探しができちゃいます。:-)

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

値を試してみる。

text_01
text_02

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

オーバーレイ(overlay)

text_01
text_02

スクリーン(screen)

text_01
text_02

除外(exclusion)

text_01
text_02

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

2つの画像の差分を表示

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

text_01
text_02

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

text_01
text_02

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

テキスト打ちした画像の差分のチェック

text_01
text_02

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

text_01
text_02

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