cssのmix-blend-modeをどこよりも詳しく徹底解説!良い感じの実装例もご紹介!

今回はcssのmix-blend-modeについてご紹介します。

mix-blend-modeは背景と要素のブレンド方法を指定するプロパティです。

Photoshopでいうところのレイヤーの描画モードで、色の組み合わせの表現はまさに無限大…!
付与することで様々な表現方法が可能です。

そんなmix-blend-modeをサンプルを交えて解説するのでぜひ最後までご覧ください。

デモ

まずはデモをご覧ください。

DEMO1

DEMO2

mix-blend-mode作成のための基本実装

まずは基本実装です。

html

<div class="img">
	<div class="container mix-blend-mode-0">
		<div class="title">CONNECRE</div>
		<div class="description">MAKE IT SIMPLE, BUT SIGNIFICANT.</div>
	</div>
</div>

css

.img {
	width: 100% ;
	height: 30vh ;
	background: url("assets/img/img-12.jpg") no-repeat center center / cover;
	display: flex ;
	justify-content: center ;
	align-items: center ;
}
.container {
}
.title, .description {
	color: #00A0F0 ;
	font-size: 5rem ;
	line-height: 5rem ;
	text-align: center ;
	font-family: 'Bebas Neue', cursive;
}
.description {
	color: #CCC ;
	font-size: 1.5rem ;
	line-height: 1.5rem ;
}
.mix-blend-mode-0 {
	mix-blend-mode: normal;
}

各ブレンドモードの解説

それでは各ブレンドモードを見ていきましょう。

乗算

基本色と合成色を掛け合わせるため暗くなる。
合成色が黒の場合は黒、白の場合は変更はない。

.mix-blend-mode-1 {
	mix-blend-mode: multiply;
}

スクリーン

基本色を反転した状態で合成色を掛け合わせるため明るくなる。
合成色が黒の場合は変更されず、白の場合は白となる。

.mix-blend-mode-2 {
	mix-blend-mode: screen;
}

オーバーレイ

明るい部分はスクリーン、暗い部分は乗算の効果が得られる。
明るい部分はより明るく、暗い部分はより暗くなるためコントラストが上がる。

.mix-blend-mode-3 {
	mix-blend-mode: overlay;
}

比較(暗)

基本色と合成色を比較して暗い方の色を合成する。

.mix-blend-mode-4 {
	mix-blend-mode: darken;
}

比較(明)

基本色と合成色を比較して明るい方の色を合成する。

.mix-blend-mode-5 {
	mix-blend-mode: lighten;
}

覆い焼き

基本色を明るくして合成色のコントラストを落とすため明るくなる。
合成色が黒の場合は変化はない 。

.mix-blend-mode-6 {
	mix-blend-mode: color-dodge;
}

焼き込み

基本色を暗くして基本色と合成色のコントラストを強くする。

.mix-blend-mode-7 {
	mix-blend-mode: color-burn;
}

ハードライト

明るい色を重ねるとスクリーンのように明るく、暗い色を重ねると乗算のように暗くなる。

.mix-blend-mode-8 {
	mix-blend-mode: hard-light;
}

ソフトライト

明るい色を重ねると覆い焼きのように明るく、暗い色を重ねると焼き込みのように暗くなる。

.mix-blend-mode-9 {
	mix-blend-mode: soft-light;
}

差の絶対値

合成色を基本色から取り除くか、基本色を合成色から取り除きます。明るさの値の大きい方のカラーから小さい方のカラーを取り除く。
白と合成すると基本色の値が反転しますが、黒と合成しても変化はない。

.mix-blend-mode-10 {
	mix-blend-mode: difference;
}

除外

差の絶対値モードと似ているが、効果のコントラストはより低くなります。
白と合成すると基本色の値が反転するが、黒と合成しても変化はない。

.mix-blend-mode-11 {
	mix-blend-mode: exclusion;
}

色相

基本色の輝度と彩度、および合成色の色相を持つ結果色を作成。

.mix-blend-mode-12 {
	mix-blend-mode: hue;
}

彩度

基本色の輝度と色相および合成色の彩度を使用して結果色を作成。

.mix-blend-mode-13 {
	mix-blend-mode: saturation;
}

カラー

基本色の輝度と合成色の色相および彩度を使用して結果色を作成。

.mix-blend-mode-14 {
	mix-blend-mode: color;
}

輝度

基本色の色相および彩度と合成色の輝度を使用して結果色を作成。

.mix-blend-mode-15 {
	mix-blend-mode: luminosity;
}

mix-blend-modeを応用!

mix-blend-modeを応用したデモを用意したのでご覧ください。

DEMO2

html

<div class="img">
	<div class="container mix-blend-mode-6">
		<div class="title">CONNECRE</div>
		<div class="description">MAKE IT SIMPLE, BUT SIGNIFICANT.</div>
	</div>
</div>

css

.img {
	width: 100% ;
	height: 100vh ;
	background: url("assets/img/img-13.jpg") no-repeat center center / cover;
	display: flex ;
	justify-content: center ;
	align-items: center ;
	position: relative ;
}
.img::after {
	content: "" ;
	width: 100% ;
	height: 100% ;
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
	mix-blend-mode: color-dodge ;
	position: absolute ;
	opacity: 0.8 ;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.container {
	color: #ddd ;
	position: relative ;
	z-index: 1 ;
}
.title, .description {
	font-size: 5rem ;
	line-height: 5rem ;
	text-align: center ;
	font-family: 'Bebas Neue', cursive;
}
.description {
	font-size: 1.5rem ;
	line-height: 1.5rem ;
}
.mix-blend-mode-6 {
	mix-blend-mode: color-dodge;
}

ポイントは以下の通りです。

  • 全画面背景画像(グレースケール)にグラデーションオーバーレイを重ねる
  • グラデーションオーバーレイは加算させアニメーションで移動
  • テキストも加算
  • テキストカラーはグレー、白の加算は白くなるだけなのでグレーにして加算させると光って見える

最後に

デモはブレンドモードが分かりやすくなるよう中間色で設定しているため文字の視認性が悪いものもありますが、背景(基本色)とテキスト(合成色)の組み合わせは無限なのでぜひいろいろ試してください。

FOLLOW US SNSで最新情報をチェック!

KEYWORD 話題のキーワード!

PREVIOUS POST スクロールでの全画面背景の切り替えパララックスをcssだけで実現!
NEXT POST WordPressで公開日と最終更新日を表示する
PAGE TOP