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

2022年7月14日2023年5月1日

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

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

Table of Contents

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

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

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

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

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

mix-blend-mode: multiply;

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

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