Blog

CSS3で合成効果

2015.09.08Cat:css3 デザイナー

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

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

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

 

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

 

各設定の
DEMO

 

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

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

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

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

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

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

 

参考サイト

mix-blend-mode – CSS | MDN

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

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ