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

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

オリジナル写真

サンプル1

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>

サンプル2

サンプル1よりも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>

サンプル3

サンプル2に追加して、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>