乗算などのブレンドモードはCSSの「mix-blend-mode」で解決

Note

on 2020-05-15

はじめまして、ロジカルスタジオでフロントエンドエンジニアをしておりますノートです。

早速ですが、この間、調子に乗っていて大ハマりしたことがあります。

例えば、このようなデザインデータがあったとして、

「うわあ。background-colorが透けてるように見えるぜ！opacity!opacity!」

と言いながらdivにopacityをかけてあげます。

ちなみにこの綺麗な盛りつけのサラダは僕が盛りつけたもので、謎に社内で酷評されていましたが、めげずに引っ張り出してきました。

それはおいておいて、余裕綽々とdivにopacityをかけてあげた結果がこちら。

この間、調子に乗っていて大ハマりしたことがあります。例えば、このようなデザインデータがあったとして、と言いながらdivにopacityをかけてあげます。ちなみにこの綺麗な盛りつけのサラダは僕が盛りつけたもので、謎に社内で酷評されていましたが、めげずに引っ張り出してきました。それはおいておいて、余裕綽々とdivにopacityをかけてあげた結果がこちら。 See the Pen kireinasarada-false by LOGICAL STUDIO PR部 (@ls_pr) on CodeP

https://develop.logical-studio.com/web/20200512-mix-blend-mode/

株式会社ロジカルスタジオ's job postings