CSSのブレンドモードを使ってみる

事例0 普通に2つの画像を重ねただけ

2枚の画像を単に重ねただけの基本的なモードです。
※2枚重ねた上側の画像はPNG形式にしてありますので、文字以外の部分が透明になっていますが、通常は白色などの背景色で四角い画像になりその部分の下側は隠れてしまいます。


Adobe PhotoshopやIllustratorなどのソフトで昔から搭載されている機能と同じ「ブレンドモード」というものがCSS3にあります。
画像や文字を重ねたときにどのように表示するかを設定する基本機能の1つです。

CSSの記述で「mix-blend-mode: darken; 」がブレンドモードなのですが、この右側の「darken」の部分だけを「color-burn」、乗算「multiply」、スクリーン「screen」、覆い焼き「 color-dodge」、オーバーレイ「overlay」、ソフトライト「soft-light」、ハードライト「hard-light」、比較(明)「lighten」、差の絶対値「difference」、除外「exclusion」、色相「hue」、彩度「saturation」、カラー「color」、輝度「luminosity」に変更するだけで色々な効果を与えることができます。

今回はその内、いくつかを紹介します。


事例1 比較(暗)モード

重なる部分の両方の色をくらべて、暗い方が適用される描画モードです。



事例2 焼き込みモード

色相を保ちながら、色と色が重なる部分を暗くし、コントラストを強くする描画モードです。



事例3 差の絶対値モード

明度の大きい方から小さい方の数値が引かれて合成するので、重なる部分の違いを可視化するモードです。



使用した2つの画像

1枚目:下側の画像(JPG)
beach-footprint.jpg
https://www.webcreatorbox.com/tech/css-blend-modeより

2枚目:上側に重ねた画像(PNG)
logo.PNG
https://fit-jp.com/demo/blendmode/#sample01より


この2枚の画像を、CSSの「mix-blend-mode」を使って、
事例1は比較(暗)「darken」を
事例2は焼き込み「color-burn」を
事例3は差の絶対値「difference」を使用しました。

事例1~3の他にも
乗算「multiply」色と色が重なる部分を暗くする描画モード。多く重ねるほど暗くなる。
スクリーン「screen」色と色が重なる部分を明るくする描画モード。多く重ねるほど明るくなる。

覆い焼き「 color-dodge」色味(色相)を保ちながら、色と色が重なる部分を明るくし、コントラストを強くする描画モード。
オーバーレイ「overlay」下の画像の色が暗いと「乗算」、明るいと「スクリーン」が適用される描画モード。

ソフトライト「soft-light」オーバーレイよりもコントラストが弱い描画モード。
ハードライト「hard-light」オーバーレイよりもコントラストが強い描画モード。

比較(明)「lighten」重なる部分の両方の色をくらべて、暗い方が適用される描画モード。
除外「exclusion」差の絶対値よりもコントラストが弱い描画モード。

色相「hue」下の画像の輝度と彩度を維持したまま、上の画像の色相を合成する描画モード。
彩度「saturation」下の画像の輝度と色相を維持したまま、上の画像の彩度を合成する描画モード。

カラー「color」下の画像の輝度を維持したまま、上の画像の色相と彩度を合成する描画モード。
輝度「luminosity」上の画像の色の輝度が、下の画像に合成される描画モード。
の効果を付けることができます。

なお、普通に重ねるときは「mix-blend-mode: ;」と右側の値は空白です。

※今回は、2枚の画像を重ねる話でしたが、画像に文字を重ねても同様の効果を得ることができます。


ソース

<CSS>
.blend__overw1{ /*比較(暗)モードの名前(任意の名前)*/
position: absolute;
top: 5%; /*上側の画像の位置を指定(以下同様)*/
left: 25%;
right: 0;
bottom: 0;
margin: 10;
mix-blend-mode: darken;  /*比較(暗)、ここの右側の値を色々変える*/
}

※上記の部分を<style>~</style>タグ内に記述する。
複数の効果を得るために、名前を変え・ブレンドモードの値を変えたものを続けて記述してOK。

<HTML>
<div class="blend">
<image src="https://(下の画像のurl)userdisk.webry.biglobe.ne.jp/〇〇.jpg" ><img class="blend__overw1" src="https://(上の画像のurl)userdisk.webry.biglobe.ne.jp/××.jpg">

※この中で、「<img class="blend__overw1"~」の部分でCSSで付けた任意の名前を指定して、CSSを適用する。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 20

なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス

この記事へのコメント

  • tor

    面白いですね。
    使ってみたくなります。
    私は
    本日アップのブログ
    引用を少し変えてみました。
    わけい様からアドバイスいただいたのですが
    FC2の機能としてありましたので
    とりあえず使ってみました。
    2019年10月09日 18:55
  • わけい

    torさんへ
    コメントどうもありがとうございます。
    本日アップのブログ、まだアップされていなかったので、楽しみにしています。
    なお、引用の機能はFC2の機能ではなく、HTML共通の機能なので、ブログやホームページの会社・組織に関わらず世界中共通で~す。
    昔からあった機能なので対応していないブログは無いと思います。
    ※人に勧めておいて、私が使っていないのは後ろめたいので、私も使うようにします。
    2019年10月09日 19:27
  • tor

    こんばんは。
    昨日のコメントで私の説明不足でした。
    FC2の機能とは「引用の適用ボタンが編集画面に有る」
    ということです。
    適用部分を選択してそのボタンを押せばOK。
    簡単にできると喜んだのですが
    ただ標準?で背景色が黒なのか
    プレビューで驚きました。
    2019年10月10日 19:42
  • わけい

    torさんへ(再)
    再コメントどうもありがとうございます。
    いえいえ、私の早とちりでした。
    FC2の引用ボタンが標準であのような画面になるようなスタイルを設定しているとは、まったく考えもしなかったです。
    環境によってある程度の幅の中で色々なスタイルの引用画面があるのは承知していましたが、正直言って「ある程度の幅」を大きくはみ出している印象でした。
    1点質問ですが「文字が黒だったら背景はどうなりますか?」→通常なら何も見えなくなってしまうと思うのですが、そうならないように文字が自動的に緑に変更されてしまうのですか?
    忙しいでしょうが、ぜひこの点は知りたいです。
    2019年10月11日 23:30
  • tor

    文字は黒が標準なので見えなくなったので
    私が緑に変更しました。
    スタイルシートをいじって黒背景は
    昨日灰色に変更しました。
    色コードはわけい様ブログに有りましたし。
    今度は文字の緑が気になりますが
    しばらくはこのままで・・・
    いろいろとありがとうございました。
    引用の背景や枠等は使用するテンプレートによって
    それぞれ個性があるようです。
    2019年10月12日 19:28
  • わけい

    torさんへ(再々)
    再々コメントどうもありがとうございます。
    状況がよく分かりました。
    torさんもスタイルシートを編集されて・・・「新幹線で黙ってると思たら、これ考えとったんやな〜 おぬしも相当腕あげたな! んなことされたら焦るでぇ〜」・・・と、漫才の「こだま・ひびき」さんの声が聞こえてくるようです。
    不思議ですね、文字が黒に背景が黒なんて。
    でも、改善できてよかったですね。

    2019年10月12日 21:43