コーディング Kota Naito / 2017.07.20 CSS3のブレンドモードを使えば、簡単にオーバーレイ等の描画モードを指定できる PhotoshopやIllustratorなどのグラフィックツールに搭載されている、ブレンドモード(描画モード)と呼ばれる機能をご存知でしょうか。要素と要素を重ねあわせることで、様々な効果を作り出すことのできる機能なのですが、実はこのブレンドモード機能、CSSのみでも実装することができるんです。それを可能にするCSSプロパティがmix-blend-modeです。 非デザイナーだけど自社サイトの更新を任されているような方にとっては、大変便利なプロパティになるかと思います。オーバーレイ効果を使った簡単な合成画像を作るくらいであれば、わざわざ外注のデザイナーに任せなくても、自分でCSSを記述するだけで、簡単に合成画像を作れるはずです。 それでは、今回はこの
![CSS3のブレンドモードを使えば、簡単にオーバーレイ等の描画モードを指定できる](https://cdn-ak-scissors.b.st-hatena.com/image/square/e311130f9011566a8344ca868c4dbc03bc50ba67/height=288;version=1;width=512/https%3A%2F%2Ffit-jp.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fblendmode.jpg)