CSS「box-shadow」ビネット効果 サンプル

　→→→　ブログ：CSS「box-shadow」で、写真にビネット効果をつけてみた。

オリジナル写真

サンプル１

box-shadowにinsetを指定することでボックスの内側に影をつけることでビネット効果を実現。
insetを2つ指定して、サイズと暗さの違う2つの影を付けている。

<style>
.vignette {
	display: inline-block;
	position: relative;
}
.vignette:after {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.6),
		    inset 0 0 200px rgba(0, 0, 0, 0.4);
}
img {
	margin: 0;
	padding: 0;
	display: block;	/* これがないと余分な枠が付いてしまう。*/
}
</style>

<div class="vignette"><img src="xxx.jpg"></div>

サンプル２

サンプル１よりもinsetのサイズを大きくしたサンプル。

<style>
.vignette {
	display: inline-block;
	position: relative;
}
.vignette:after {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.6),
		    inset 0 0 300px rgba(0, 0, 0, 0.4);
}
img {
	margin: 0;
	padding: 0;
	display: block;	/* これがないと余分な枠が付いてしまう。*/
}
</style>

<div class="vignette"><img src="xxx.jpg"></div>

サンプル３

サンプル２に追加して、insetの暗さを濃いめにしたサンプル。

<style>
.vignette {
	display: inline-block;
	position: relative;
}
.vignette:after {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.9),
		    inset 0 0 300px rgba(0, 0, 0, 0.6);
}
img {
	margin: 0;
	padding: 0;
	display: block;	/* これがないと余分な枠が付いてしまう。*/
}
</style>

<div class="vignette"><img src="xxx.jpg"></div>