CSSブレンドモードで画像を彩ろう
Photoshopをはじめとしたグラフィックツールに搭載されている「ブレンドモード（描画モード）」機能。複数の画像や色を様々な手法で重ね合わせ、独特の効果をうみだします。そんなブレンドモード、実はCSSでも実装できるんです！今回はそんなCSSブレンドモードにフォーカスしてみようと思います！
対応ブラウザー
Can I use…によると、IE以外のモダンブラウザーに対応しています。
ブレンドモード一覧
基本的な実装方法は、background プロパティで背景色と背景画像を同時に指定。続いて background-blend-mode プロパティに、以下で羅列するブレンドモード名を記述するだけです。
body {
background: #0bd url(beach-footprint.jpg) no-repeat;
background-blend-mode: screen;
}
こんな感じ。
それではこちらの海の画像に、それぞれのブレンドモードで青を重ねるとどうなるか見てみましょう。
multiply（乗算）
See the Pen CSS blend mode: multiply by Mana (@manabox) on CodePen.
screen（スクリーン）
See the Pen CSS blend mode: screen by Mana (@manabox) on CodePen.
overlay（オーバーレイ）
See the Pen CSS blend mode: overlay by Mana (@manabox) on CodePen.
darken（暗く）
See the Pen CSS blend mode: darken by Mana (@manabox) on CodePen.
lighten（明るく）
See the Pen CSS blend mode: lighten by Mana (@manabox) on CodePen.
color-dodge（覆い焼きカラー）
See the Pen CSS blend mode: color-dodge by Mana (@manabox) on CodePen.
color-burn（焼き込みカラー）
See the Pen CSS blend mode: color-burn by Mana (@manabox) on CodePen.
hard-light（ハードライト）
See the Pen CSS blend mode: hard-light by Mana (@manabox) on CodePen.
soft-light（ソフトライト）
See the Pen CSS blend mode: soft-light by Mana (@manabox) on CodePen.
difference（差の絶対値）
See the Pen CSS blend mode: difference by Mana (@manabox) on CodePen.
exclusion（除外）
See the Pen CSS blend mode: exclusion by Mana (@manabox) on CodePen.
hue（色相）
See the Pen CSS blend mode: hue by Mana (@manabox) on CodePen.
saturation（彩度）
See the Pen CSS blend mode: saturation by Mana (@manabox) on CodePen.
color（カラー）
See the Pen CSS blend mode: color by Mana (@manabox) on CodePen.
luminosity（輝度）
See the Pen CSS blend mode: luminosity by Mana (@manabox) on CodePen.
画像＋画像
複数の画像を重ねて、どのように表示できるのか見てみましょう。組み合わせによってはすべてが見づらくなるので、画像選びは入念に。画像を組み合わせるには、background プロパティで複数の画像をカンマで区切って指定します。
See the Pen CSS blend mode: multiple images by Mana (@manabox) on CodePen.
ドットやライン、テクスチャ画像と組み合わせてもおもしろいですね！
See the Pen CSS blend mode: multiple images 2 by Mana (@manabox) on CodePen.
画像＋グラデーション
以前「美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！」という記事で背景画像とグラデーションを組み合わせた例を紹介しました。それだけでも素敵ですが、さらにブレンドモードと組み合わせて、ひと味違った表現をしてみましょう！
カラフルなグラデーション
ここでは screen というブレンドモードを採用。青から赤という少しきつい印象のグラデーションですが、ブレンドモード次第で優しい雰囲気に。
See the Pen CSS blend mode: gradation colour by Mana (@manabox) on CodePen.
画像の内側にシャドウをプラス
画像の端から中心にかけて、黒から透明の円型グラデーションを組み合わせ。Photoshopでいう「シャドウ（内側）」に似た表現ができます。
See the Pen CSS blend mode: radial gradation colour by Mana (@manabox) on CodePen.
画像＋アニメーション
さらにアニメーションもプラスしてみましょう！過去記事「CSS3アニメーションに挑戦！色が移り変わる背景を実装しよう」の例でも取り上げたCSSで表現する色の移り変わりアニメーションをブレンドモードで重ねています。
アニメーションがうまく表示されない方は、でも画面右下の「RETURN」または右上「Edit on CODEPEN」をクリックしてみてください。
See the Pen CSS blend mode: colour animation by Mana (@manabox) on CodePen.
画像＋テキスト
ブレンドモードで表示できるのは、画像と色の組み合わせだけではありません。背景画像の上にテキストを重ねても、素敵な表現ができますよ！要素にブレンドモードを加える場合は background-blend-mode ではなく、 mix-blend-mode プロパティを追加します。
See the Pen CSS blend mode: mix-blend-mode by Mana (@manabox) on CodePen.
Webサイト上での表現方法の幅がぐんと広がるブレンドモード。Webサイトデザインのアイデアのひとつとして覚えておくとよさそうです！
