頭痛と戦う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を使いました。