[CSS]セレクタの便利な使い方も学べる、一枚の画像で写真を重ねたように見せるスタイルシートのテクニック

画像は一枚だけで、複数の写真を重ねたように配置するスタイルシートのテクニックを紹介します。
下記のキャプチャは、それぞれ一枚の画像しか使用していません。

Use Pseudo Elements to Create an Image Stack Illusion

[ad#ad-2]

• Demo 1
• Demo 2

Demo 1

Demo 1

まずは、HTMLから。

HTML

img要素をdiv要素で内包したシンプルなHTMLです。
divにclassを付与するのがポイントです。

<div class='stackone'>
	<img src="image.jpg" />
</div>

デモでは下記の画像を使用しました。

Tinkerbell
画像のサイズ：200x130

[ad#ad-2]

CSS

CSSはステップごとに、説明します。
まずは、margin, paddingをリセットし、bodyの背景カラーをセットします。

* {margin: 0; padding: 0;}
body {background: #ccd3d7;}

画像に少しスタイルを加えます。
画像の周りに写真のような縁取りをし、シャドウを加えます。
※height, widthは画像のサイズに合わせて変更してください。

.stackone {
	border: 6px solid #fff;
	float: left;
	height: 200px; width: 200px;
	margin: 50px;
	position: relative;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

Step 1/4:写真のような縁取りを

擬似要素を使って、さらにスタイルを加えます。
画像の下にもう一つ画像があるようにします。

.stackone:before {
	content: "";
	height: 200px; width: 200px;	
	background: #eff4de;
	border: 6px solid #fff;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

Step 2/4: 画像の下にもう一枚あるように

この時点では、単に崩れているようにしか見えません。
ポジションを変更してみます。

.stackone:before {
	content: "";
	height: 200px; width: 200px;
	background: #eff4de;
	border: 6px solid #fff;
 
	position: absolute;
	z-index: -1;
	top: 0px;
	left: -10px;
 
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
 
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
}

Step 3/4: ポジションを調整

最後に、もう一つ擬似要素を使ってみます。
この2番目はポジションを少し変え、背景カラーも異なるものにします。

.stackone:after {
	content: "";
	height: 200px; width: 200px;
	background: #768590;
	border: 6px solid #fff;
	position: absolute;
	z-index: -1;
	top: 5px;
	left: 0px;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	-o-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	transform: rotate(4deg);
}

Step 4/4: 完成
Demo 1

Demo 2

Demo 2

Demo 1の実装を応用して、さまざまなエフェクトに挑戦してみます。

HTML

Demo 1と同様の方法で、3枚の画像を配置します。
class名がそれぞれ異なるので、注意してください。

<div class='stackone'>
	<img src="image.jpg" />
</div>

<div class='stacktwo'>
	<img src="image.jpg" />
</div>

<div class='stackthree'>
	<img src="image.jpg" />
</div>

CSS

まずは、写真の縁取りをします。

.stackone, .stacktwo, .stackthree {
	border: 6px solid #fff;
	float: left;
	height: 200px; width: 200px;
	position: relative;
	margin: 50px;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

上記のようにclassを一つずつ記述してもよいのですが、ここではもう少し楽になるように、セレクタを利用して記述します。

div[class*='stack'] {
	border: 6px solid #fff;
	float: left;
	height: 200px; width: 200px;
	position: relative;
	margin: 50px;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

これで記述が楽になりました。また、画像を増やしても「stack」とつけていれば、スタイルシートの変更は必要ありません。

Step 1/3: 写真のような縁取りを

同様にセレクタを使って、画像の下にもう一枚画像があるようにしてみます。

div[class*='stack'] {
	float: left;
	position: relative;
	margin: 50px;
}
 
div[class*='stack'], div[class*='stack']:before, div[class*='stack']:after {
	border: 6px solid #fff;
	height: 200px; width: 200px;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
 
div[class*='stack']:before, div[class*='stack']:after {
	background: #768590;
	content: "";
	position: absolute;
	z-index: -1;
}
 
div[class*='stack']:before {
	background: #eff4de;
}

Step 2/3: 画像の下にもう一枚あるように

最後に、3つの画像の重なり具合を変えて、スタイルしてみます。

/*STACK ONE*/
.stackone:before {
	top: 4px;
	left: -6px;
}
 
.stackone:after {
	top: -2px;
	left: -6px;
}
 
/*STACK TWO*/
.stacktwo:before {
	top: 0px;
	left: -10px;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
}
 
.stacktwo:after {
	top: 5px; left: 0px;
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	-o-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	transform: rotate(4deg);
}
 
/*STACK THREE*/
.stackthree:before {
	top: 5px;
	left: -15px;
	z-index: -1;
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	transform: rotate(-10deg);
}
 
.stackthree:after {
	top: -2px;
	left: -10px;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
}

Step 3/3: 完成
Demo 2