CSS3で合成効果

私は最近知ったことなのですが、

Phtoshopのレイヤーの合成効果と同じものを、

CSS3でも設定することができます。

その設定には、「mix-blend-mode」というプロパティを使って次のように書きます。

各設定の
DEMO

設定できる値は基本的にPhotoshopと同じです。

実際の効果は、ブラウザによってはPhotoshopと若干異なるものもあります。

ちなみにIEの全てのバージョンとEdgeはこのプロパティに対応していませんが、

その他のモダンブラウザでは対応しています。

PCでの表示の場合、目立つ場所でまだ実用で使うのは難しいですが、

スマホでの表示や、装飾程度であれば利用できる場合もありそうです。

参考サイト

mix-blend-mode – CSS | MDN

Photoshop｜レイヤーパレットメニューの和訳・英訳 – Dynamite Design Blog｜海外Webデザインネタ日本語訳＆作成チュートリアル

WRITER

ninomiya

Webデザイナー兼コーダー出身のフロントエンド開発者です。 UXデザインやチーム開発の効率化など、勉強中です。

この著者の記事を見る