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

2013/6/6 2013/8/19 css

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

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

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

まずはhtmlから

<div class="img_zindex">
	<div class="img_01 imgbox">
		<img src="img/001.png" alt="mastermind JAPAN">
	</div>
	<div class="img_02 imgbox">
		<img src="img/002.png" alt="APE">
	</div>
	<div class="img_03 imgbox">
		<img src="img/003.png" alt="JIN KATAGIRI">
	</div>
</div>

</div>

</div>

</div>

普通の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);
}