link3014 link3015 link3016 link3017 link3018 link3019 link3020 link3021 link3022 link3023 link3024 link3025 link3026 link3027 link3028 link3029 link3030 link3031 link3032 link3033 link3034 link3035 link3036 link3037 link3038 link3039 link3040 link3041 link3042 link3043 link3044 link3045 link3046 link3047 link3048 link3049 link3050 link3051 link3052 link3053 link3054 link3055 link3056 link3057 link3058 link3059 link3060 link3061 link3062 link3063 link3064 link3065 link3066 link3067 link3068 link3069 link3070 link3071 link3072 link3073 link3074 link3075 link3076 link3077 link3078 link3079 link3080 link3081 link3082 link3083 link3084 link3085 link3086 link3087 link3088 link3089 link3090 link3091 link3092 link3093 link3094 link3095 link3096 link3097 link3098 link3099 link3100 link3101 link3102 link3103 link3104 link3105 link3106 link3107 link3108 link3109 link3110 link3111 link3112 link3113 link3114 link3115 link3116 link3117 link3118 link3119 link3120 link3121 link3122 link3123 link3124 link3125 link3126 link3127 link3128 link3129 link3130 link3131 link3132 link3133 link3134 link3135 link3136 link3137 link3138 link3139 link3140 link3141 link3142 link3143 link3144 link3145 link3146 link3147 link3148 link3149 link3150
トップページ > Apple, IT, Internet > CSSで写真を鏡面反射させる方法

online resume editing services

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 交換レンズ編

最近のエントリー