CSSイメージリフレクション
この章では、画像を反映する方法を学習します。
CSS画像の反射
このbox-reflectプロパティは、画像の反射を作成するために使用されます。
box-reflectプロパティbelowの値はabove、、、、、
leftまたはrightです。
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
数字の後に-webkit-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。
| Property | |||||
|---|---|---|---|---|---|
| box-reflect | 4.0 -webkit- | 79.0 -webkit- | Not supported | 4.0 -webkit- | 15.0 -webkit- |
例
例
ここでは、画像の下に反射が必要です。
img {
-webkit-box-reflect: below;
}
例
ここでは、画像の右側に反射が必要です。
img {
-webkit-box-reflect: right;
}
CSS反射オフセット
画像と反射の間のギャップを指定するには、ギャップのサイズをbox-reflectプロパティに追加します。
例
ここでは、20pxのオフセットで、画像の下に反射が必要です。
img {
-webkit-box-reflect: below 20px;
}
グラデーションを使用したCSSリフレクション
反射にフェードアウト効果を作成することもできます。
例
反射にフェードアウト効果を作成します。
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0),
rgba(0,0,0,0.4));
}