REDLINE MAGAZINE

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

background-blend-mode + linear-gradient　一覧

このサンプルのHTML

.sample{
	display:inline-block;
	width:200px;
	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;}

.linear-gradient{background:linear-gradient(90deg, #000000 0%,#ffffff 100%), url(blend/image.jpg) no-repeat;}

このサンプルのHTML

<div class="sample multiply linear-gradient"><span>multiply</span></div>
<div class="sample screen linear-gradient"><span>screen</span></div>
<div class="sample overlay linear-gradient"><span>overlay</span></div>
<div class="sample darken linear-gradient"><span>darken</span></div>
<div class="sample lighten linear-gradient"><span>lighten</span></div>
<div class="sample color-dodge linear-gradient"><span>color-dodge</span></div>
<div class="sample color-burn linear-gradient"><span>color-burn</span></div>
<div class="sample hard-light linear-gradient"><span>hard-light</span></div>
<div class="sample soft-light linear-gradient"><span>soft-light</span></div>
<div class="sample difference linear-gradient"><span>difference</span></div>
<div class="sample exclusion linear-gradient"><span>exclusion</span></div>
<div class="sample hue linear-gradient"><span>hue</span></div>
<div class="sample saturation linear-gradient"><span>saturation</span></div>
<div class="sample color linear-gradient"><span>color</span></div>
<div class="sample luminosity linear-gradient"><span>luminosity</span></div>