[CSS]画像加工なしで写真をレイアウトする

頭痛と戦うWEB屋さん下山です。

「トップページの写真を自分たちでも入れ替えたいよねー」って言われましてね。
Photoshop使って写真を加工して上のようにレイアウトしてたんですよ。
お客様に「じゃあPhotoshop買って勉強しましょうか！」と言えるわけもなくね。

と言うわけでCSSでやっちゃいました。

まずはhtmlから

普通のdivの入れ子です。

そしてCSS

div.img_zindex {
	position:relative;
}
div.imgbox {
	width:350px;
	height:232px;
	padding:5px;
	border:1px solid #ccc;
	background:#fff;
	position:absolute;
	box-shadow:0 0 2px 2px #eee;
}
div.img_01 {
	top:10px;
	left:0;
	z-index:1;
	-webkit-transform: rotate(-10deg);
	   -moz-transform: rotate(-10deg);
	    -ms-transform: rotate(-10deg);
	     -o-transform: rotate(-10deg);
	        transform: rotate(-10deg);
}
div.img_02 {
	top:20px;
	left:300px;
	z-index:2;
	-webkit-transform: rotate(5deg);
	   -moz-transform: rotate(5deg);
	    -ms-transform: rotate(5deg);
	     -o-transform: rotate(5deg);
	        transform: rotate(5deg);
}
div.img_03 {
	top:30px;
	left:600px;
	z-index:3;
	-webkit-transform: rotate(-5deg);
	   -moz-transform: rotate(-5deg);
	    -ms-transform: rotate(-5deg);
	     -o-transform: rotate(-5deg);
	        transform: rotate(-5deg);
}

という感じです。

positionで各写真が入ったdivをレイアウトしてあげて、z-indexで重なり順を指定してあげる。
あとはtransform:rorateで傾けたり、box-shadowで影付けたり。

このレイアウトを作っておけばWordPressのアルバムを3枚読み込むだけですわ。（実際こっちのほうが大変ですが・・・）
ちなみにNextGENを使いました。

demo