CSSのmix-blend-modeを使ってみる

2023.11.25

要素が重なった際の見え方を指定できるmix-blend-modeを使ってみます。

サンプルコード

mix-blend-modeで設定できるキーワード値は以下になります。

normal 標準。重なった色が何であるかに関わらず、上の色が最終的な色になる。
darken 比較(暗)。重なった色を比較して、最も暗い値が最終的な色になる。
multiply 乗算。重なった色を掛け合わせた結果が最終的な色になる。
color-burn 焼き込みカラー。反転した下の色を上の色で除算して、さらに反転した結果が最終的な色になる。
lighten 比較(明)。重なった色を比較して、最も明るい値が最終的な色になる。
screen スクリーン。色を反転して乗算を行い、さらに色を反転した結果が最終的な色になる。
color-dodge 覆い焼きカラー。下の色を、反転した上の色で除算した結果が、最終的な色になる。
overlay オーバーレイ。下の色が暗ければ multiply、下の色が明るければ screen の結果が最終的な色になる。
hard-light ハードライト。上の色が暗い色であれば multiply 、明るい色であれば screen の結果が最終的な色になる。
soft-light ソフトライト。最終的な色は hard-light に似ているが、よりソフトになる。
difference 差異。重なった色のうち明るい色から、暗い色を減算した結果が最終的な色になる。
exclusion 除外。最終的な色は difference に似ているが、コントラストが低くなる。
hue 色相。上の色の色相と、下の色の彩度・明度を持つ色になる。
saturation 彩度。上の色の彩度と、下の色の色相・明度を持つ色になる。
color カラー。上の色の色相・彩度と、下の色の明度を持つ色になる。
luminosity 輝度。上の色の明度と、下の色の色相・彩度を持つ色になる。

各値がどのような見え方になるのかをいくつか試してみます。
まずは赤・青・緑の背景色の要素をずらして重ねてみます。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="wrap normal">
  <p>normal(標準)</p>
  <div class="box red"></div>
  <div class="box blue"></div>
  <div class="box green"></div>
</div>
〜 略 〜
<div class="wrap luminosity">
  <p>luminosity(輝度)</p>
  <div class="box red"></div>
  <div class="box blue"></div>
  <div class="box green"></div>
</div>

それぞれの重ねる要素に対して、mix-blend-modeを設定します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.box {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
 
.normal .box {
  mix-blend-mode: normal;
}
〜 略 〜
.luminosity .box {
  mix-blend-mode: luminosity;
}
 
.red {
    top: 25px;
    left: 50px;
    background-color: red;
}
.blue {
    bottom: 25px;
    right: 25px;
    background-color: blue;
}
.green {
    bottom: 25px;
    left: 25px;
    background-color: green;
}

mix-blend-modeのデモページ

次に画像の上に黒・白・赤の文字色のテキストを重ねてみます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="wrap normal">
  <p class="head">normal(標準)</p>
  <p class="text top black">TEXT</p>
  <p class="text top red">TEXT</p>
  <p class="text top white">TEXT</p>
  <p class="text bottom black">TEXT</p>
  <p class="text bottom red">TEXT</p>
  <p class="text bottom white">TEXT</p>
</div>
〜 略 〜
<div class="wrap luminosity">
  <p class="head">luminosity(輝度)</p>
  <p class="text top black">TEXT</p>
  <p class="text top red">TEXT</p>
  <p class="text top white">TEXT</p>
  <p class="text bottom black">TEXT</p>
  <p class="text bottom red">TEXT</p>
  <p class="text bottom white">TEXT</p>
</div>

それぞれの重ねるテキストに対して、mix-blend-modeを設定します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.wrap {
    position: relative;
    background: url(img.jpg) center center no-repeat;
    background-size: cover;
}
.text {
    position: absolute;
}
 
.normal .text {
  mix-blend-mode: normal;
}
〜 略 〜
.luminosity .text {
  mix-blend-mode: luminosity;
}
 
.top {
    top: 30px;
}
.bottom {
    bottom: 20px;
}
.black {
    left: 20px;
    color: black;
}
.white {
    right: 20px;
    color: white;
}
.red {
    left: 50%;
    color: red;
    translate: -50% 0;
}

mix-blend-modeのデモページ2

参考サイト

関連記事

コメントを残す

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

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年4月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
27282930