Tweet

アップルの広告などでよく使われる、製品が下に鏡面反射で映り込んでいる写真。あれをCSSで実現する方法があるようなんです。ただしイケメンSafariに限る。ていうかWebKitに限るからChromeも大丈夫かな？

以下のブログにて解説されておりました。
HTML5 videoの「映り込み」はCSS3または<canvas>で出来る！？ - 秋葉秀樹 個人ブログ

video { -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(0.4, rgba(0,0,0,0)),to(rgba(0,0,0,0.8))); }

「-webkit-box-reflect」を使うのですね。
上記の場合はvideo要素を反射させています。なんと再生してるときも反射してるのがすごい。

さて、私の場合は画像に同じように施術したいと思います。style属性を用いて以下をimg要素に付記してみました。
style="-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(0.2, rgba(0,0,0,0)),to(rgba(0,0,0,0.4)));"

おわーーすごい！反射しとるよ！

反射させたらパンツ見えるかと思ったけど無理やったわ残念www

反射の高さとおなじぶん margin-bottom も同時に設定してやらないと後続の要素が反射部分にかぶってしまいますね。気をつけてください。

ソニー製品でもアップルぽくなりますかね？w

投稿者 ジェット☆ダイスケ : 2010年8月22日 02:34