REDLINE MAGAZINE

このページは　CSS3 background-blend-modeを試してみた　のサンプルページです。

ブレンドモード　一覧

このサンプルのHTML

.sample{
	display:inline-block;
	width:200px;
	background:#75c4d1 url(blend/image.jpg) no-repeat;
	border:1px solid #999;
	border-radius:6px;
	padding:206px 0 0 0;
	margin:10px;
	}
.sample span{
	display:block;
	width:180px;
	height:1.5em;
	background:#f1f1f1;
	text-align:center;
	text-shadow:1px 1px 1px #fff;
	border-radius:4px;
	margin:0 auto 6px;
	}
	
.multiply{background-blend-mode:multiply;}
.screen{background-blend-mode:screen;}
.overlay{background-blend-mode:overlay;}
.darken{background-blend-mode:darken;}
.lighten{background-blend-mode:lighten;}
.color-dodge{background-blend-mode:color-dodge;}
.color-burn{background-blend-mode:color-burn;}
.hard-light{background-blend-mode:hard-light;}
.soft-light{background-blend-mode:soft-light;}
.difference{background-blend-mode:difference;}
.exclusion{background-blend-mode:exclusion;}
.hue{background-blend-mode:hue;}
.saturation{background-blend-mode:saturation;}
.color{background-blend-mode:color;}
.luminosity{background-blend-mode:luminosity;}

このサンプルのHTML

<div class="sample"><span>normal(元画像)</span></div>
<div class="sample multiply"><span>multiply</span></div>
<div class="sample screen"><span>screen</span></div>
<div class="sample overlay"><span>overlay</span></div>
<div class="sample darken"><span>darken</span></div>
<div class="sample lighten"><span>lighten</span></div>
<div class="sample color-dodge"><span>color-dodge</span></div>
<div class="sample color-burn"><span>color-burn</span></div>
<div class="sample hard-light"><span>hard-light</span></div>
<div class="sample soft-light"><span>soft-light</span></div>
<div class="sample difference"><span>difference</span></div>
<div class="sample exclusion"><span>exclusion</span></div>
<div class="sample hue"><span>hue</span></div>
<div class="sample saturation"><span>saturation</span></div>
<div class="sample color"><span>color</span></div>
<div class="sample luminosity"><span>luminosity</span></div>