CSS3だけを使って画像を反射させるんだもん。

いままで、画像が反射したような表現はjavascriptのライブラリを使っていたと思いますけど、今回はCSS3だけで、画像の反射（リフレクション）を表現する方法を紹介します。

まずは、デモを見てください。

CSSの記述

-webkit-box-reflectを利用して、画像をリフレクトさせています。
まぁ、今の所ブラウザは限定させますね（ボクの環境ではchrome5.03では○・safari4.05は○・Firefox3.6では× ・IEシラね）

img {
  -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));
  -webkit-border-radius: 3px;
   border-radius: 3px;
   border: 3px solid #666;
}

早い話、こんな風になります。

ネタもと：nettuts Quick Tip: Pure CSS Reflections

Share/Bookmark