link5840 link5841 link5842 link5843 link5844 link5845 link5846 link5847 link5848 link5849 link5850 link5851 link5852 link5853 link5854 link5855 link5856 link5857 link5858 link5859 link5860 link5861 link5862 link5863 link5864 link5865 link5866 link5867 link5868 link5869 link5870 link5871 link5872 link5873 link5874 link5875 link5876 link5877 link5878 link5879 link5880 link5881 link5882 link5883 link5884 link5885 link5886 link5887 link5888 link5889 link5890 link5891 link5892 link5893 link5894 link5895 link5896 link5897 link5898 link5899 link5900 link5901 link5902 link5903 link5904 link5905 link5906 link5907 link5908 link5909 link5910 link5911 link5912 link5913 link5914 link5915 link5916 link5917 link5918 link5919 link5920 link5921 link5922 link5923 link5924 link5925 link5926 link5927 link5928 link5929 link5930 link5931 link5932 link5933 link5934 link5935 link5936 link5937 link5938 link5939 link5940 link5941 link5942 link5943 link5944 link5945 link5946 link5947 link5948 link5949 link5950 link5951 link5952 link5953 link5954 link5955 link5956 link5957 link5958 link5959 link5960 link5961 link5962 link5963 link5964 link5965 link5966 link5967 link5968 link5969 link5970 link5971 link5972 link5973 link5974 link5975 link5976 link5977 link5978 link5979 link5980 link5981 link5982 link5983 link5984 link5985
トップページ > Apple, IT, Internet > CSSで写真を鏡面反射させる方法

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

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

アップルの広告などでよく使われる、製品が下に鏡面反射で映り込んでいる写真。あれを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



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

ジェット☆ダイスケ

ジェット☆ダイスケ
愛場大介/ジェット☆ダイスケ
昭和生まれの古い男がこのブログを地味に更新しつづけております。趣味はブログです。 ツイッターIDは @jetdaisukeです。 また、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 交換レンズ編

最近のエントリー