online_school_bo
Bootstrap,  WordPress

ブレンドモード一覧

https://www.webcreatorbox.com/tech/css-blend-mode

ブレンドモード一覧

基本的な実装方法は、background プロパティで背景色と背景画像を同時に指定。続いて background-blend-mode プロパティに、以下で羅列するブレンドモード名を記述するだけです。

1234body {  background: #0bdurl(beach-footprint.jpg) no-repeat;  background-blend-mode: screen;}

こんな感じ。

元画像
それではこちらの海の画像に、それぞれのブレンドモードで青を重ねるとどうなるか見てみましょう。

multiply(乗算)

https://codepen.io/manabox/embed/vOKrGb?height=420&theme-id=2299&slug-hash=vOKrGb&default-tab=result&user=manabox&name=cp_embed_1

screen(スクリーン)

https://codepen.io/manabox/embed/mJEKEg?height=420&theme-id=2299&slug-hash=mJEKEg&default-tab=result&user=manabox&name=cp_embed_2

overlay(オーバーレイ)

https://codepen.io/manabox/embed/ZGORpK?height=420&theme-id=2299&slug-hash=ZGORpK&default-tab=result&user=manabox&name=cp_embed_3

darken(暗く)

https://codepen.io/manabox/embed/YXWvGd?height=420&theme-id=2299&slug-hash=YXWvGd&default-tab=result&user=manabox&name=cp_embed_4

lighten(明るく)

https://codepen.io/manabox/embed/pJbKNN?height=420&theme-id=2299&slug-hash=pJbKNN&default-tab=result&user=manabox&name=cp_embed_5

color-dodge(覆い焼きカラー)

https://codepen.io/manabox/embed/bdeKqV?height=420&theme-id=2299&slug-hash=bdeKqV&default-tab=result&user=manabox&name=cp_embed_6

color-burn(焼き込みカラー)

https://codepen.io/manabox/embed/MweXpm?height=420&theme-id=2299&slug-hash=MweXpm&default-tab=result&user=manabox&name=cp_embed_7

hard-light(ハードライト)

https://codepen.io/manabox/embed/JdKZWZ?height=420&theme-id=2299&slug-hash=JdKZWZ&default-tab=result&user=manabox&name=cp_embed_8

soft-light(ソフトライト)

https://codepen.io/manabox/embed/aOZKWG?height=420&theme-id=2299&slug-hash=aOZKWG&default-tab=result&user=manabox&name=cp_embed_9

difference(差の絶対値)

https://codepen.io/manabox/embed/QbExgK?height=420&theme-id=2299&slug-hash=QbExgK&default-tab=result&user=manabox&name=cp_embed_10

exclusion(除外)

https://codepen.io/manabox/embed/EjyRXE?height=420&theme-id=2299&slug-hash=EjyRXE&default-tab=result&user=manabox&name=cp_embed_11

hue(色相)

https://codepen.io/manabox/embed/doXKRw?height=420&theme-id=2299&slug-hash=doXKRw&default-tab=result&user=manabox&name=cp_embed_12

saturation(彩度)

https://codepen.io/manabox/embed/MweXvo?height=420&theme-id=2299&slug-hash=MweXvo&default-tab=result&user=manabox&name=cp_embed_13

color(カラー)

https://codepen.io/manabox/embed/JdKZyB?height=420&theme-id=2299&slug-hash=JdKZyB&default-tab=result&user=manabox&name=cp_embed_14

luminosity(輝度)

https://codepen.io/manabox/embed/BNzVwN?height=420&theme-id=2299&slug-hash=BNzVwN&default-tab=result&user=manabox&name=cp_embed_15

画像+画像

複数の画像を重ねて、どのように表示できるのか見てみましょう。組み合わせによってはすべてが見づらくなるので、画像選びは入念に。画像を組み合わせるには、background プロパティで複数の画像をカンマで区切って指定します。

https://codepen.io/manabox/embed/doXKVa?height=426&theme-id=2299&slug-hash=doXKVa&default-tab=result&user=manabox&name=cp_embed_16

ドットやライン、テクスチャ画像と組み合わせてもおもしろいですね!

https://codepen.io/manabox/embed/gpMKXO?height=420&theme-id=2299&slug-hash=gpMKXO&default-tab=result&user=manabox&name=cp_embed_17

画像+グラデーション

以前「美しいグラデーションをCSSで実装!配色に使える便利ツールや実例も!」という記事で背景画像とグラデーションを組み合わせた例を紹介しました。それだけでも素敵ですが、さらにブレンドモードと組み合わせて、ひと味違った表現をしてみましょう!

カラフルなグラデーション

ここでは screen というブレンドモードを採用。青から赤という少しきつい印象のグラデーションですが、ブレンドモード次第で優しい雰囲気に。

https://codepen.io/manabox/embed/MweXrv?height=450&theme-id=2299&slug-hash=MweXrv&default-tab=result&user=manabox&name=cp_embed_18

画像の内側にシャドウをプラス

画像の端から中心にかけて、黒から透明の円型グラデーションを組み合わせ。Photoshopでいう「シャドウ(内側)」に似た表現ができます。

https://codepen.io/manabox/embed/MweXQE?height=450&theme-id=2299&slug-hash=MweXQE&default-tab=result&user=manabox&name=cp_embed_19

画像+アニメーション

さらにアニメーションもプラスしてみましょう!過去記事「CSS3アニメーションに挑戦!色が移り変わる背景を実装しよう」の例でも取り上げたCSSで表現する色の移り変わりアニメーションをブレンドモードで重ねています。
アニメーションがうまく表示されない方は、でも画面右下の「RETURN」または右上「Edit on CODEPEN」をクリックしてみてください。

https://codepen.io/manabox/embed/JdKZpm?height=450&theme-id=2299&slug-hash=JdKZpm&default-tab=result&user=manabox&name=cp_embed_20

画像+テキスト

ブレンドモードで表示できるのは、画像と色の組み合わせだけではありません。背景画像の上にテキストを重ねても、素敵な表現ができますよ!要素にブレンドモードを加える場合は background-blend-mode ではなく、 mix-blend-mode プロパティを追加します。

https://codepen.io/manabox/embed/QbExmd?height=450&theme-id=2299&slug-hash=QbExmd&default-tab=result&user=manabox&name=cp_embed_21


Webサイト上での表現方法の幅がぐんと広がるブレンドモード。Webサイトデザインのアイデアのひとつとして覚えておくとよさそうです!

シェアする

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です