[CSS] How To Create a Pure CSS Polaroid Photo Gallery – CSSだけを使って表現するポラロイド風フォトギャラリー
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だけを使って表現するポラロイド風フォトギャラリー”