ブレンドモード

画像加工について調べていたら驚いた話。発見があったので、メモ。ヒーロー画像を何枚か用意し、色味を変えて展開したいというオーダーがあり、調べたらありました。その名はmix-blend-mode。adobeのツールのように、乗算やオーバーレイなどができます。いちいちphotosopに戻らずに、色味を調整できるのが優れものです。スタックコンテキストという概念を理解しないと効果が適用されないので、ちょっと難しいんですが、ローカルでサーバー立ち上げていれば、ブラウザを見ながら色味を調整できます。

mix-blend-modeが効かない時はスタックコンテキストを考えよう

要素がブレンドされる仕組みを知っておかないとmix-blend-modeが効かない時に問題を解決できないかもしれません。…

かけちまるblog

値も色々あって、色々な効果が期待できます。

background-blend-mode「背景画像のブレンド効果」【CSSリファレンス】

今回の案件では、swiperとの組み合わせで使いましたが、特に変な動きもなく、いい感じでした。ちなみに、バナーなど他のパーツでも使っていて、その時はbackground-blend-modeを使用。こちらにある通り、3行で効果を発揮するとは嬉しい限りです。

そうなってくると、photoshopは画像の解像度や色味や明るさの調整するだけ済みそう。あれ、ちょっとしたら、これもcssだけで出来ちゃうんだろうか。後で調べてみよう。