• RSS

[CSS]-webkit-box-reflect による鏡面効果の設定方法とAndroid への対応方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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");
}
を使うことで、スマホでも一応対応はできるようですね。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す