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

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

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

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

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

まずはhtmlから

普通のdivの入れ子です。

そしてCSS

という感じです。

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

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

demo

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