トップページ > Apple, IT, Internet > CSSで写真を鏡面反射させる方法
カスタム検索

CSSで写真を鏡面反射させる方法

Safariのみ有効な方法ですが、Appleの広告のような床面への映り込みを実現する「-webkit-box-reflect」というCSSがあるようです。



Clip to Evernote


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

以下のブログにて解説されておりました。
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
SONY デジタルカメラ Cybershot HX5V

SONY デジタルHDビデオカメラレコーダー CX170



Clip to Evernote



投稿者 愛場大介(Daisuke AIBA / Jetdaisuke) : 2010年8月22日 02:34

コメント:

このエントリーのトラックバックURL:

このエントリーを参照してないトラックバックは削除する場合があります

Related Posts Plugin for WordPress, Blogger...

ジェット☆ダイスケ

ジェット☆ダイスケ
愛場大介ジェット☆ダイスケ
昭和生まれの古い男がこのブログを地味に更新しつづけております。趣味はブログです。 ツイッターIDは @jetdaisukeです。 そしてGoogle Plusはこちらにどうぞ。また、YouTubeのチャンネル登録はこちらからできます。

なんかいいアイテム


ナノ一眼 PENTAX Q の実力
iPhoneとも戦えるカメラ、ナノ一眼 PENTAX Q を購入しました
シャッター切るたび画調が変わる PENTAX Q のランダムなクロスプロセスが楽し過ぎるのだ
PENTAX Q トイレンズ比較 魚眼/広角/望遠
ペンタックスQのバッテリは、フジフイルム、コダックとも共通
ナノ一眼PENTAX Qをもう一台導入しまして
ナノ一眼 PENTAX Q でも星を撮影できた
PENTAX Q 動画モードについての感想

世界最小15倍ズームレンズB008とキヤノンEOS 60Dで大自然を撮ってみよう!
TAMRON 18-270mmF3.5-6.3 Di2 VC PZD B008
タムロン 18-270mmF3.5-6.3 Di2 VC PZD B008

バリアングル液晶でビデオ撮影も快適なデジイチ
Canon デジタル一眼レフカメラ EOS 60D
EOS 60D
レビュー記事:
EOS 60Dのバリアングル液晶はやっぱり動画撮りやすいです
キヤノン 一眼レフ EOS 60D を購入してみた

[地球圏最強の標準レンズ]
シグマ30mm F1.4レンズは企業プロモーションビデオにも使える優れもの
SIGMA 30mm F1.4 EX DC

Canon EFレンズ 50mm F1.8 II 最安の単焦点レンズを試す
Canon EFレンズ 50mm F1.8 II
[最安の超広角レンズ買うた]
タムロン超広角ズームレンズ TAMRON SP AF10-24mm F/3.5-4.5 Di II
TAMRON AF10-24mm F/3.5-4.5 DiIILD Aspherical
TAMRON AF10-24mm F/3.5-4.5 DiIILD

【EOS 関連記事】
キヤノンEOS Kiss X3関連で購入したアイテムまとめ1 純正品編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ2 お役立ち編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ3 交換レンズ編

最近のエントリー

AMN