CSSブレンドモードの利用

全2回

ピクセルグリッドのコーポレートサイトでは、SVGとグラデーションを合成したデザインを用いています。PhotoshopやIllustratorにもあるようなブレンドモードをCSSで利用します。

後編 ブレンドモードの実装

前回紹介したCSSブレンドモードを用いて、ピクセルグリッドのコーポレートサイトでは、どのように実装されているのかを解説します。また、実装してみてわかった注意点についても触れます。

前編 ブレンドモードの仕様

このシリーズではCSSのブレンドモードを利用したヒーローエリアの実装について解説します。この実装は、リニューアルしたピクセルグリッドコーポレートサイトのヒーローエリアに使われています。PhotoshopやIllustratorの機能として見かけるようなさまざまなモードでのブレンドがCSSで実現できます。