頭痛と戦うWEB屋さん下山です。
「トップページの写真を自分たちでも入れ替えたいよねー」って言われましてね。
Photoshop使って写真を加工して上のようにレイアウトしてたんですよ。
お客様に「じゃあPhotoshop買って勉強しましょうか!」と言えるわけもなくね。
と言うわけでCSSでやっちゃいました。
まずはhtmlから
1 2 3 4 5 6 7 8 9 10 11 |
<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の入れ子です。
そしてCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
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を使いました。