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

要素が重なった際の見え方を指定できる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 輝度。上の色の明度と、下の色の色相・彩度を持つ色になる。

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

<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を設定します。

.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のデモページ

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

<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を設定します。

.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


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

2024年2月
 123
45678910
11121314151617
18192021222324
2526272829