mix-blend-modeを使用で白黒反転

mix-blend-modeとは、cssのプロパティの一つで
要素の内容物と親要素の内容物や要素の背景をどのように混合するかを設定できるもの。

混合するのが主な用途かもしれないですが、実はdifferenceを使用すると簡単にカラーの反転を実装することができます。

 mix-blend-mode: difference;

たったこの１行を該当箇所のスタイルに適応させてあげるだけです！

しかも、テキストカラー、背景色などいろいろなものが対象です。
試しにテキスト（color）とハンバーガーメニュー（background-color）を対象として検証してみました！

See the Pen Untitled by niyu (@niyu1103) on CodePen.

テキストもハンバーガーメニューの棒（背景色で実装）の色も白（#fff）で実装しているのですが、
背景色が黒から白へ移動した際に自動で黒へ反転していることがわかるかと思います！

すごい！

クラスやjsなどで色の変更はできての、中途半端な位置の場合こんな感じにはなりません。

これが簡単に実装できるなんて！すごいなーと感心です。

今回は反転を目的に使用しましたが、 mix-blend-modeには他にもいろいろあるので、カラー的な変化など、いろいろな可能性を感じますね！

是非いろいろ試してみて欲しいです！

参考サイト：