写真をテープで貼ったように見せるギャラリー

写真をテープで貼ったように見せます。手作り風のデザインと組み合わせて。

• デモを見る

HTML のマークアップはシンプルに。

<ul class="image-container">
<li><img src="p1.jpg" alt=""></li>
<li><img src="p2.jpg" alt=""></li>
<li><img src="p3.jpg" alt=""></li>
<li><img src="p4.jpg" alt=""></li>
<li><img src="p5.jpg" alt=""></li>
<li><img src="p6.jpg" alt=""></li>
</ul>

こんなテープの画像を用意します。

:before, :after 疑似要素に content プロパティを使って画像を配置します。

.image-container li {
	position: relative;
}

.image-container li:before, .image-container li:after {
	content: url(tape.png);

	/* tape.png の大きさ */
	width: 60px;
	height: 20px;

	/* 位置を調整する */
	display: block;
	position: absolute;
	left: -20px;
	top: 0px;
	z-index: 100;

	/* 傾ける */
	transform: rotate(-35deg);
	-webkit-transform: rotate(-35deg);
	-moz-transform: rotate(-35deg);
}

.image-container li:after {
	/* 位置を調整する */
	left: auto;
	top: auto;
	right: -20px;
	bottom: 0px;

	/* 角度に変化をつける */
	transform: rotate(-40deg);
	-webkit-transform: rotate(-40deg);
	-moz-transform: rotate(-40deg);
}

疑似要素を li ではなく img に指定することも考えられますが、Internet Explorer 8 でテープの画像が写真の下に隠れてしまいます。そのため li 要素に指定しています。
transform プロパティによる img 要素の回転はブラウザによって淵が汚くなることがあります。Safari (Mac/Windows) と Firefox (Windows) がきれい、Firefox (Mac) はそこそこ、Chrome (Windows) はジャギーが出ます。
デモで使用した CSS およびテープの画像はご自由にご利用ください。