コーディング時の乗算はCSSのmix-blend-modeを覚えておくと便利

最近はポンッとデザインデータが送られてきて、それをコーディングすることが増えてきました。
そんな中で同時期に来た案件で悩んだのがデザイン時に乗算になっている箇所。

透過のpngでもないし、普通に背景色が白のjpgだし、該当箇所を背景ごと切り出すにはどうしても難しい場合、さあどうする?

本当にあったCSSで乗算が使えるmix-blend-mode

まさかCSSで乗算なんて出来ないだろうなぁ、と思い調べてみたらすぐに出てきた笑

大体のことは「あるだろう」前提で調べるのだが、今回は「まさか無いだろう」「あったら良いな」ぐらいで調べてみたので、本当に見つけたときは珍しく嬉しかった。

IllustratorやPhotoshopなどのデザインする系のソフトでは当たり前の用に使っていたけど、実際にそれをウェブの方で再現できるとなると更に幅が広がりますね。
乗算だけでなく、描画モードで使えるその他の種類も表現できるようなので凄く便利。

使い方としてはこんな感じ。

mix-blend-mode: multiply;

上記multipyは乗算となります。

mix-blend-modeの種類としては以下の通り。
デザインソフトで使用しているものが使えるのが本当に助かりますね。

通常normal
乗算multiply
スクリーンscreen
オーバーレイoverlay
覆い焼きcolor-dodge
焼き込みcolor-burn
比較(暗)darken
比較(明)lighten
ハードライトhard-light
ソフトライトsoft-light
差の絶対値difference
除外exclusion
色相hue
彩度saturation
カラーcolor
輝度luminosity

あちこち調べると色んな記事は出てくるので、結構知られていることだったのは驚きでしたが、自分自身の備忘録として残しておきます。
自分が大体参考にしているのはこちらです。

https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode