CSS）影付き枠＋ビネット効果を使った写真のサムネイルアルバム(神戸散歩)をつくってみた。

↑ で、CSSを使って、写真に影付き枠とビネット効果を付けてみた。

今回、これを使って、写真のサムネイルアルバムをつくってみた。写真は神戸を散歩して撮ったものの一部を使った。

サムネイルの各写真の枠は正方形とし、正方形の中にビネット効果を付けた写真を中央に入れた。

写真を中央に入れるためと、サムネイルをずれることなく並べるのにてこずった。CSSは難しい。ブロック内でブロック要素を上下左右中央揃えにする方法では以下を参考にした。"display: flex;"からの3行がそれ。

<style>
#gallery {
	padding: 0;
	text-align: left;
}
img {
	display: block;		/* これがないと余分な枠が付いてしまう。*/
}
.box-frame {
	margin: 4px;
	width: 340px;
	height: 340px;
	float: left;	/* 横並び display:inline-block; ではうまくいかない */
	display: flex;			/* flex box */
	justify-content: center;	/* ブロック内で左右中央揃え */
	align-items: center;		/* ブロック内で上下中央揃え */
	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;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.6),
	inset 0 0 100px rgba(0, 0, 0, 0.4);
}
</style>

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

実際作成したWebページが以下。