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