Androidで-webkit-box-reflectによる鏡面効果を指定する方法

Androidで-webkit-box-reflectのマスク処理が使えない!とつぶやいた@mattari_pandaからurl()による指定は聞くよと教えていただきました。

そもそも-webkit-box-reflectってなによ!

画像などの反射を制御することができるCSSプロパティです。WebKit独自のプロパティなのでSafariやChrome以外のブラウザでは利用できません。

 -webkit-box-reflect:<direction> <length> <image>; 

といった感じで指定が可能です。

directionには上(above)、下(below)、左(left)、右(right)が指定できます。
lengthには反射画像の距離を指定できます。
imageにはマスク画像が指定できます。

ということで次のようにマスク画像に-webkit-gradientでグラデーションを指定すると簡単に鏡面効果が指定できます。

img{
 -webkit-box-reflect:below 1px 
    -webkit-gradient(
      linear, 
      left top, 
      left bottom, 
      from(transparent), 
      color-stop(0.8, transparent), 
      to(rgba(255,255,255,0.4)));
}

サンプル

しかし、残念ながらAndroidでは2.1、2.2ともに -webkit-gradientによる-webkit-box-reflectが利用できません。iPhoneやiPadではiOS3.2から利用できます。

ところが、マスク画像に透過pngを利用することでAndroidでも-webkit-box-reflectが利用できるようになります。

img{
	-webkit-box-reflect:below 1px url("reflect.png");
}

サンプル

スマートフォン向けサイトで鏡面効果を使いたい場合に使えるテクニックなので覚えておくとよいかも。

関連エントリー

Android エミュレータでサイト制作
Androidでfont-weight:boldを適用する方法
HTML5が使えるスマートフォンOS
Androidの「target-densitydpi」でviewportの調整
Androidブラウザでviewportのwidth指定

スポンサードリンク

«セミナー紹介「羽田野太巳の HTML5 API 徹底解説」 | メイン | Androidと-webkit-tap-highlight-color»