CSS）写真に影付きのシンプルな枠＋ビネット効果

↑ で、写真に枠(フレーム)を付けた。

この写真に、さらにビネット効果を付ける。ビネット効果については、以下リンク先を参照。

ビネット効果を付ける<div>を、枠を付ける<div>で囲む。

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

<style>
img {
	margin: 0;
	padding: 0;
	display: block;	/* これがないと余分な枠が付いてしまう。*/
}
.box-frame {
	display: inline-block;	/* 重要 */
	padding:7px;
	border:1px solid #ccc;
	background:#fff;
	box-shadow: 1px 1px 5px rgba(20,20,20,0.2);
	border-radius: 4px;
}
.vignette {
	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);
}
</style>

★ 実際に試したHTMLとCSSのサンプルは以下

↓ これを利用してサムネイルアルバムを作った。