CSS3画像の反射[CSS3のヒント]
これまでのところ、私達はで多くの新しい特性を論じました CSS3. それを超えて、実際に試してみる価値があるCSS3公式仕様に現在含まれていない他のいくつかの特性があります。 ボックス反映 によって開始されるプロパティ ウェブキット. このプロパティは指定されたオブジェクトに反映できます.
基本的な反射
基本的な実装は非常に直感的です。たとえば、実際のオブジェクトの下に反射を置きたいとしましょう。我々は書ける：
img -webkit-box-reflect：below;
この例は、画像をどのように反射するかを示しています。 以下 （位置）オブジェクトしかし、この場合、私たちはまた、 右, 左, そして 上に.
反射オフセット
オフセット 反射と実際の反射の間のギャップを定義するために使用されます。以下のコードスニペットを見てみましょう。
img -webkit-box-reflect：10ピクセル以下;
上記のコードでは、実際のオブジェクトからの反射を次のように分離しました。 10px;
- デモを見る
グラデーションでマスキングする
よく見られる反射効果は、下部がフェードアウトし、実際のオブジェクトの半分以下しか表示されないことです。この種の効果を再現するために、我々は適用することができます CSS3グラデーション そのようにオブジェクトをマスクする。
-webkit-box-reflect：0pxより下の-webkit-gradient（線形、左上、左下、（透明）から、（rgba（250、250、250、0.1）まで））;
このコードは次のように表示されます。
私達も使用できます カラーストップ 遷移を制御し、反射をより見やすくするために：
img -webkit-box-reflect：0px未満-webkit-gradient（線形、左上、左下、（透明）、カラーストップ（70％、透明）、〜（rgba（250、250、250、0.1） ））;
- デモを見る
Firefoxの代替手段
ただし、現時点では、このプロパティはWebkitブラウザ（SafariとChromeを意味する）でしか機能していません。 Firefoxで同じ効果を実現するには、別の方法が必要です。 -モズ要素（） 関数。この関数は本質的に特定のHTML要素からコンテンツを生成または複製します。次の例を見てみましょう。
に包まれた画像があります。 そして、反射を握るために、私達は使用します の 残念ながら、作成する簡単な方法はまだありません いいね この方法を使用したFirefoxでの反射効果上記のコードは、フェード効果なしで単に反射を作成します。.モズを反映 id;
：後 疑似要素, 次のように; ＃moz-reflect：after content： "";表示ブロック;背景：-moz-element（＃moz-reflect）繰り返しなし。幅：自動。高さ：375ピクセル。マージンボトム：100px。 -moz-transform：scaleY（-1）;
-モズ変換 負のスケールでは生成されたオブジェクトをひっくり返します。また、 高さ 実際のオブジェクトの精度に対して十分に正確です。 高さ 反射を配置するための不要な余分な線を避けるため.その他の参考文献
