CSS3 filterプロパティによる画像の調整や効果のまとめ（２）

このページは、「CSS3 filter（画像の調整や効果）のまとめ」の続きで、filterプロパティの値を複数同時に適用したサンプルを載せています。

ぼかし + 透明度

ぼかし（blur）と透明度（opacity）を同時に適用しています。「オリジナル　filter無し」以外の3つの画像にそれぞれ「blur(2px) + opacity(80%)」、「blur(3px) + opacity(65%)」、「blur(6px) + opacity(40%)」を適用しています。また、透明度を確認するため、背景に薄い黄緑の正方形を置いています。

.blur2-opa80 {
	filter: blur(2px) opacity(80%);
	}
.blur3-opa65 {
	filter: blur(3px) opacity(65%);
	}	
.blur6-opa40 {
	filter: blur(6px) opacity(40%);
	}

ぼかし + 明度

ぼかし（blur）と明度（brightness）を同時に適用しています。「オリジナル　filter無し」以外の3つの画像にそれぞれ「blur(2px) + brightness(130%)」、「blur(3px) + brightness(160%)」、「blur(8px) + brightness(250%)」を適用しています。

.blur2-br130 {
	filter: blur(2px) brightness(130%);
	}
.blur3-br160 {
	filter: blur(3px) brightness(160%);
	}
.blur8-br250 {
	filter: blur(8px) brightness(250%);
	}

セピアと透明度

セピア（sepia）と透明度（opacity）を同時に適用しています。「オリジナル　filter無し」以外の3つの画像にそれぞれ「sepia(60%) + opacity(80%)」、「sepia(80%) + opacity(60%)」、「sepia(100%) + opacity(40%)」を適用しています。また、透明度を確認するため、背景に薄い黄緑の正方形を置いています。

.sepia60-opa80 {
	filter: sepia(60%) opacity(80%);
	}	
.sepia80-opa60 {
	filter: sepia(80%) opacity(60%);
	}
.sepia100-opa40 {
	filter: sepia(100%) opacity(40%);
	}

色相回転と諧調反転

色相回転（hue-rotate）と諧調反転（invert）を同時に適用しています。「オリジナル　filter無し」以外の3つの画像にそれぞれ「hue-rotate(109deg) + invert(100%)」、「hue-rotate(147deg) + invert(100%)」、「hue-rotate(242deg) + invert(100%)」を適用しています。

.hue109-in100 {
	filter: hue-rotate(109deg) invert(100%);
	}
.hue147-in100 {
	filter: hue-rotate(147deg) invert(100%);
	}
.hue242-in100 {
	filter: hue-rotate(242deg) invert(100%);
	}

色相回転と明度

色相回転（hue-rotate）と明度（brightness）を同時に適用しています。「オリジナル　filter無し」以外の3つの画像にそれぞれ「hue-rotate(80deg) + brightness(130%)」、「hue-rotate(110deg) + brightness(150%)」、「hue-rotate(230deg) + brightness(200%)」を適用しています。

.hue80-bra130 {
	filter: hue-rotate(80deg) brightness(130%);
	}
.hue110-bra150 {
	filter: hue-rotate(110deg) brightness(150%);
	}
.hue230-bra200 {
	filter: hue-rotate(230deg) brightness(200%);
	}

セピアと諧調反転

セピア（sepia）と諧調反転（invert）を同時に適用しています。「オリジナル　filter無し」以外の3つの画像にそれぞれ「sepia(20%) + invert(100%)」、「sepia(50%) + invert(100%)」、「sepia(90%) + invert(100%)」を適用しています。複数のfilterを同時にかける場合、その順序によって効果は変わります。このサンプルでは、先にかけたセピア色を諧調反転しているので、セピア系の色は薄まります。

.sepia20-in10 {
	filter: sepia(20%) invert(100%);
	}
.sepia50-in10 {
	filter: sepia(50%) invert(100%);
	}
.sepia90-in10 {
	filter: sepia(90%) invert(100%);
	}

諧調反転とセピア

前のサンプルのfilterの順序を変え、セピア（sepia）と諧調反転（invert）の順に同時に適用しています。「オリジナル　filter無し」以外の3つの画像にそれぞれ「invert(100%) + sepia(20%)」、「invert(100%) + sepia(50%)」、「invert(100%) + sepia(90%)」を適用しています。このサンプルでは、先に諧調反転し、その後にセピアを適用しているので、セピア系の色が残ります。

.in10-sepia20 {
	filter: invert(100%) sepia(20%);
	-webkit-filter: invert(100%) sepia(20%);
	}
.in10-sepia50 {
	filter: invert(100%) sepia(50%);
	-webkit-filter: invert(100%) sepia(50%);
	}
.in10-sepia90 {
	filter: invert(100%) sepia(90%);
	-webkit-filter: invert(100%) sepia(90%);
	}