目次
CSS3の「mix-blend-mode」で画像の間違い探しができる。
CSS3ってのはこんな機能もあるんだと感心したのでご紹介。
「mix-blend-mode」というプロパティで要素が重なった場合、どのように色をブレンドするかという指定ができるみたいです。
詳細な説明は下記のサイトを参照。
https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode
PhotoshopやIllustratorで見かける「オーバーレイ」とか「乗算」とか「スクリーン」っていうアレですね。
「どういう場面で使うの?」って思いますが、その一例として2つの画像の「差の絶対値(difference)」で間違い探しができちゃいます。:-)
その前に少しこのプロパティの表示をいろいろと確認してみることにしました。
値を試してみる。


この2つの画像をブレンドしてみます。
オーバーレイ(overlay)


スクリーン(screen)


除外(exclusion)


こんな感じ。アイデア次第という感じでしょうか。。。現状ならCSS3でブレンドするよりとりあえずPhotoshopで加工した状態の画像をアップする方が楽な気がします。
2つの画像の差分を表示
それでは2つの間違え探し画像で差分を表示してみたいと思います。


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


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


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


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