CSSブレンドモードで画像を彩ろう

CSSブレンドモードで画像を彩ろうPhotoshopをはじめとしたグラフィックツールに搭載されている「ブレンドモード（描画モード）」機能。複数の画像や色を様々な手法で重ね合わせ、独特の効果をうみだします。そんなブレンドモード、実はCSSでも実装できるんです！今回はそんなCSSブレンドモードにフォーカスしてみようと思います！ 対応ブラウザーCan I use…によると、IE 以外のモダンブラウザーに対応しています。 ブレンドモード一覧基本的な実装方法は、background プロパティで背景色と背景画像を同時に指定。続いて background-blend-mode プロパティに、以下で羅列するブレンドモード名を記述するだけです。 body { background: #0bd url(beach-footprint.jpg) no-repeat; background-blend-mode

[Nemisama]

IE以外ならOK

[idr_zz]

うわー乗算モードになっている色をCSSで再現したいがカンタンじゃなさそう。 またしてもIEめ…

[tailtame]

アニメーションキレイだなぁ。「background-blend-mode」「mix-blend-mode」下の要素に重ねるならmixか。

[Nyoho]

background-blend-mode

[nattyanoranged]

CSSブレンドモード

[k_ume75]

IE以外のモダンブラウザーに対応（Safariも一部不可）

[lordkf]

Photoshop的な表現をCSSで出来る（ただし、IEは除く）

[kagioo2uma]

IE死ねよ

[mirinon]

あゆの夏ソングはポップだけど切なさがあって好き

[hedeyoshi]

photoshopのレイヤーで乗算とかあるけどそういうのがcssでできちゃうぜって話。