[CSS]-webkit-box-reflect による鏡面効果の設定方法とAndroid への対応方法
スポンサード
ポイントは「マスク処理」で、ここの指定が抜けると画像が反射の方向に反射距離分だけ反転表示させるだけなので、グラデーションや透過PNG 画像でうまく鏡面効果を演出する必要があります。
スポンサード
CSS3 の -webkit-box-reflect
プロパティを使って画像に「鏡面効果」を与える方法のご紹介です。
以前紹介させていただいた reflection.js のような Javascript を使う方法もありますが、SafariやChrome、iPhoneなどのスマホへの対応に限るものの、CSS だけで手軽に鏡面効果を演出できるので便利なプロパティだと思います。
目次
-webkit-box-reflect の値
-webkit-box-reflect
は「反射の方向」「反射の距離」「マスク処理」を指定できます。「反射の方向」は上(above)、下(below)、左(left)、右(right)
「反射の距離」はピクセル
「マスク処理」には
をそれぞれ設定するという使い方になります。「反射の距離」はピクセル
「マスク処理」には
-webkit-gradient
によるグラデーションか透過PNG 画像ポイントは「マスク処理」で、ここの指定が抜けると画像が反射の方向に反射距離分だけ反転表示させるだけなので、グラデーションや透過PNG 画像でうまく鏡面効果を演出する必要があります。
-webkit-box-reflect で鏡面効果のサンプル
CSS 側の記述例ですが、鏡面効果を与えたい画像に-webkit-box-reflect
を指定します。img { -webkit-box-reflect: below 1px -webkit-gradient( linear,left top,left bottom, from(transparent), to(#ffffff)); }「マスク処理」に
-webkit-gradient
を指定し、上から透明→白色(このブログ記事の背景色)でグラーデーションをかけます。グラーデーションの調整
グラデーションの幅を変更するため、-webkit-gradient
の値を調整してみます。img { -webkit-box-reflect: below 1px -webkit-gradient( linear,left top,left bottom, from(transparent), color-stop(0.5, transparent), to(#ffffff)); }先の例と比べて、反射部分の見え方が若干変わりました。
マスク処理に透過PNG を利用する
先の例とは異なり、今度は-webkit-gradient の変わりにグラデーション処理を施した透過PNG 画像を読み込ませてみます。img { -webkit-box-reflect: below 1px url("reflect.png"); }「マスク処理」の値に
url("透過PNG 画像のパス")
を指定すると、こんな感じで表示されます↓。Andorid 2.1 と 2.2 への対応
-webkit-box-reflect
はAndorid 2.1 と 2.2 に完全には対応していないのですが、残念ながらAndroidでは2.1、2.2ともに -webkit-gradientによる-webkit-box-reflectが利用できません。iPhoneやiPadではiOS3.2から利用できます。
ところが、マスク画像に透過pngを利用することでAndroidでも-webkit-box-reflectが利用できるようになります。
Androidで-webkit-box-reflectによる鏡面効果を指定する方法
マスク処理に透過PNG を利用することで回避できるようです。
先の例の
img { -webkit-box-reflect: below 1px url("reflect.png"); }を使うことで、スマホでも一応対応はできるようですね。
スポンサード
コメント