Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

[CSS] How To Create a Pure CSS Polaroid Photo Gallery – CSSだけを使って表現するポラロイド風フォトギャラリー

  • Pocket
  • このエントリーをはてなブックマークに追加

CSSだけで表現する、ポラロイド写真風のフォトギャラリー。ポラロイド風の枠を付けるところまでは現行のCSSだけでオッケー。その先のドロップシャドウ表現と、散らばった感じに角度を付ける点はCSS 3による新しいプロパティを使っています。傾ける表現がなかなか興味深い。ポイントは“ -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg);”の部分ですね。元の写真は傾いてないのに、上記指定をする事で角度を付けて見せる事ができます。またz-indexを使って、マウスオーバー時に必ず最前面に来るようにしている点も気が利いています。

One thought on “[CSS] How To Create a Pure CSS Polaroid Photo Gallery – CSSだけを使って表現するポラロイド風フォトギャラリー”

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください