CSS3 リフレクション例のチュートリアル

共有

サンプル画像

CSS3 が登場する前は、サンプル画像のような反射効果を実現する唯一の方法は、画像を処理することでした。これは 1 つの CSS3 プロパティだけで簡単に実装できます。

これが今日説明する box-reflect 属性です。

まず W3C によって与えられた box-reflect 構文を見てみましょう:

box-reflect: none (? はデフォルトにできることを意味します)つまり、後の 2 つの属性は不要です)
= 上 | 左 | 右 |
| ; (それぞれ: 固定値 | パーセンテージ)
| < 反復放射状グラデーション> (それぞれ: マスク画像なし | マスク画像パス | 線形グラデーション | 放射状グラデーション | 繰り返し線形グラデーション | 繰り返し放射状グラデーション)
デフォルト値: なし

box-reflect は 2 つを与えることができます3 つの属性値。1 つはデフォルト値です。つまり、反射効果はありません。もう 1 つは、同時に 3 つの属性値を割り当てることができます。これらは反射方向、要素と反射の間の距離を表し、後の 2 つの属性値はデフォルトにすることができますが、存在する場合は、 が必要です。

辛口な説明をたくさんした後は、いくつかの例を挙げて理解するのが良いでしょう。

ここで、記事の冒頭にあるサンプル画像の投影効果を段階的に実装していきます:

①以下の属性値を 1 つだけ指定します。

<!--HTML代码-->< img class="img" src="imgs/cat.jpg" />

rree

効果を達成します:

②5pxの間隔を追加します。

/*CSS代码*/.img{ -webkit-box-reflect: below; box-reflect: below;}

効果を達成する:

③最後に画像マスクを追加します。

/*CSS代码*/.img{ -webkit-box-reflect: below 5px; box-reflect: below 5px;}

ここでのピクチャマスクはピクチャを使用していませんが、CSS3のlinear-gradient属性値を使用しています。具体的な使用方法はここでは説明しません()。非常に詳しく書かれています。

効果を達成する:

これは、記事の冒頭にあるサンプル画像の最終的な効果です。

次に、放射状グラデーションを使用した画像マスクの作成と画像マスクの直接使用について説明します。

放射状グラデーションは実際には線形グラデーションに似ています。CSS3 の基本的な放射状グラデーション方法をマスターするだけで済みます。

/*CSS代码*/.img{ -webkit-box-reflect: below 5px -webkit-linear-gradient(transparent 60%,rgba(0,0,0,.3));box-reflect: below 5px linear-gradient(transparent 60%,rgba(0,0,0,.3));}

達成された効果:

効果は素晴らしいです。猫が本当に鏡を見ているようです~~

画像マスクを直接使用するとどうなりますか?たとえば、この画像をマスクとして使用します:

/*CSS代码*/.img{ -webkit-box-reflect: left 0 -webkit-radial-gradient(#000 30%,transparent); box-reflect: left 0 radial-gradient(#000 30%,transparent);}

効果は次のとおりです:

mask.png

マスク画像が完全に伸びて反射画像を埋めることがわかります。その効果は、完全に透明な部分が表示されないことです (実際、CSS3 のグラデーション イメージ マスキングの原理はこれと同じです)。

上記の効果はすべて、写真だけでなくテキストなどの他の要素にも使用できることに注意してください。

互換性: box-reflectは非常に優れているように見えますが、残念ながら、現時点ではWebkitコアブラウザとのみ互換性がありますが、モバイル端末では基本的に問題ありません~~

以上がCSS3 リフレクション例のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。