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

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

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

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

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

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

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

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

続きはロジカルスタジオオフィシャルブログから！！

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

この間、調子に乗っていて大ハマりしたことがあります。例えば、このようなデザインデータがあったとして、と言いながら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/

Invitation from 株式会社ロジカルスタジオ

If this story triggered your interest, have a chat with the team?

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

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

Note

株式会社ロジカルスタジオ /

デザイナーフロントエンドエンジニア Web制作マークアップエンジニア HTML＆CSS

13 Likes

株式会社ロジカルスタジオ

◼️システムに強いクリエイティブプロダクション　当社は、ソフトウェア開発会社として培った技術力を強みにディレクションからデザイン、システム開発、コーディング、メンテナンスまでワンストップで請け負うクリエイティブプロダクションです。イラスト・グラフィック・動画制作などのクリエイティブから、データベースが絡むシステム構築まで幅広くカバーできる強みを生かし、さらなる業務拡大を目指しています。

Like Note's Story

Let Note's company know you're interested in their content

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

続きはロジカルスタジオオフィシャルブログから！！

株式会社ロジカルスタジオ

デザイナー

Weekly ranking