2018.1.22CSS3のブレンドモードbackground-blend-modeとイラレで作成したものを比較してみると分かる事コーダーの方やデザイナーの方は経験があるかと思われますが、デザインに乗算がかかっていたりした場合、pngなどで書き出してWEBで表示すると思っていたものと違う表示になっていたなんて事はありませんか?「WEBで乗算はなるべく使わない」なんてことはもう一昔前の事になっているのかもしれないです。今までデザイナーが気をつけていた?乗算やらなんやらはCSS3から新たに登場したブレンドモードで解決できそうです!そこでCSS3から登場したブレンドモードについていろいろ検証してみようと思います。まとめCSS3で登場したブレンドモードとは?ブレンドモードとは、ようは「乗算」などの「透明」要素の「通常」以外のものがCSS3で再現できるようになります。CSS3で新たに登場したブレンドモードには2種類あります。プロパティは要素の内容物と、下にある要素の内容物や要素の背景色ををどのようにブレンドするかを示します。プロパティは、要素の背景画像を互いに、あるいは要素の背景色とどのようにブレンドするかを示します。上記の2種類により様々な状況でのブレンドに対応できます。caniuse.com.見て分かる通り今のところIE以外はほぼほぼ対応しているとうい状況ではありますね。ブレンドモードの比較さあ、いよいよ本題である、イラストレーター上でのブレンドと実際にCSS3のブレンドモードをWEBで表現したものを比較していきたいと思います。今回はbackground-blend-modeだけの比較をしていきます。mix-blend-modeについてはこちらからCSS3「mix-blend-mode」の可能性と表現、CSSでここまでできる!どのような結果になるのでしょうか。違いがあるのであれば、今後はそれを意識して使っていかないといけないところでしょうか。結構な違いが現れますね、WEBのほうだとほぼ黄色が強くでています。CodePen.・イラレでの表示こちらも乗算と同じくほぼ同じと見ていいでしょう。CodePen.・イラレ上での表示こちらも変わらずと言っていいですね。これはかなり違います。若干できている部分もありますが、なかなか難しいものですね。CodePen.・イラレ上での表示これもWEB上だとちょっと独特なイメージになってしまいます。CodePen.・イラレ上での表示イラレ上だとやはりハードですね。CodePen.・イラレ上での表示あれ?これ逆なんじゃ、と思いますが、そうなんですCSSのソフトライトとイラレのハードライトが一緒、CSSのハードライトとイラレのソフトライトが一緒なんです。これはどういう事でしょう。CodePen.・イラレ上での表示これは驚きです。CodePen.・イラレ上での表示カラーも別物ですね。この辺りはなかなか同じものが出てきませんね。CodePen.・イラレ上での表示なんとWEB上でのカラーがイラレ上の輝度と、WEB上での輝度がイラレ上のカラーと同じなのではないでしょうか。要素と違う要素が同じであったり、全く別物であったり、と少々不安定ではありますが、同じものもありますので、そこを抑えてCSS3のブレンドモードを使用していくといいかもしれないです。IEに関しては対応としてはしておりませんが、その他のサイトでは真価を発揮できるのではないでしょうか?もし使う機会があれば、今回の検証を参考にしていただければと思います!なかなか記事を書くのが慣れていないので読みづらい部分もあるかと思われますが、温かい目で見ていただければと思います。min-blend-modeに関しては次回触れていけたらと思います。以上で比較検証を終わりたいと思います。ありがとうございました。