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

2013/8/19 css

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

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

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

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

まずはhtmlから

Default
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

Default
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を使いました。

demo

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

下山 光揮

スポンサーリンク