CSSのblend-modeを使い、複数の画像やカラーを重ねてPhotoshopのレイヤーと描画モードを利用した合成のような効果を作ります。 サンプルは、花の画像を背景に使い、その上に青色を付けたdiv要素(分かりやすくやや小さめ)を載せています。初期状態で花の画像のblend-modeはnoneになっていて、画像の下側のボタンでblend-modeを切り替えます。ボタンの名称がそれぞれblend-modeの値になっています。効果作成はCSSのみでおこなっていますが、ボタンによる値の切り替えにJavaScriptを使っています。

効果名:通常(初期)、darken(比較・暗)、multiply(乗算)、color-burn(焼き込みカラー)、lighten(比較・明)、screen(スクリーン)、color-dodge(覆い焼きカラー)、overlay(オーバーレイ)、soft-light(ソフトライト)、hard-light(ハードライト)、difference(差の絶対値)、exclusion(除外)、hue(色相)、saturation(彩度)、color(カラー)、luminosity(輝度)。

元の花の画像の見た目(縮小しています)

サンプルの花の画像

サンプル(重ね合わせ) 状態:通常(初期)

htmlソース

<div id="image-wrap">
	<div id="upper"></div>
</div>
<div id="btn">
	<ul>
		<li><button id="darken">darken</button></li>
		<li><button id="multiply">multiply</button></li>
		<li><button id="color-burn">color-burn</button></li>
		<li><button id="lighten">lighten</button></li>
		<li><button id="screen">screen</button></li>
		<li><button id="color-dodge">color-dodge</button></li>
		<li><button id="overlay">overlay</button></li>
		<li><button id="soft-light">soft-light</button></li>
		<li><button id="hard-light">hard-light</button></li>
		<li><button id="difference">difference</button></li>
		<li><button id="exclusion">exclusion</button></li>
		<li><button id="hue">hue</button></li>
		<li><button id="saturation">saturation</button></li>
		<li><button id="color">color</button></li>
		<li><button id="luminosity">luminosity</button></li>
	</ul>
</div>

CSSソース

div#image-wrap {
	width:600px;
	height:370px;
	margin:10px auto;
	position:relative;
	background:url(img3/hana600.png);
	}
div#upper {
	width:580px;
	height:350px;
	position:relative;
	background:#0460f8;
	top:10px;
	left:10px;
	mix-blend-mode: none;
	}

Scriptソース

$(function(){
	$("#darken").on('click',function(){
		$("#upper").css('mix-blend-mode','darken');
		$("#status").text('darken(比較・暗)');
	});
				/* 中略 */ 
	$("#luminosity").on('click',function(){
		$("#upper").css('mix-blend-mode','luminosity');
		$("#status").text('luminosity(輝度)');
	});
});

 

戻るボタン