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