Refleksi Gambar CSS
Dalam bab ini Anda akan belajar bagaimana memantulkan sebuah gambar.
Refleksi Gambar CSS
Properti box-reflectini digunakan untuk membuat refleksi gambar.
Nilai box-reflectproperti dapat berupa: below, above,
left, atau right.
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Angka diikuti oleh -webkit- menentukan versi pertama yang berfungsi dengan awalan.
| Property | |||||
|---|---|---|---|---|---|
| box-reflect | 4.0 -webkit- | 79.0 -webkit- | Not supported | 4.0 -webkit- | 15.0 -webkit- |
Contoh
Contoh
Di sini kita ingin refleksi di bawah gambar:
img {
-webkit-box-reflect: below;
}
Contoh
Di sini kita ingin refleksi di sebelah kanan gambar:
img {
-webkit-box-reflect: right;
}
Offset Refleksi CSS
Untuk menentukan celah antara gambar dan pantulan, tambahkan ukuran celah ke box-reflectproperti.
Contoh
Di sini kita ingin pantulan di bawah gambar, dengan offset 20px:
img {
-webkit-box-reflect: below 20px;
}
Refleksi CSS Dengan Gradien
Kita juga bisa membuat efek fade-out pada pantulan.
Contoh
Buat efek fade-out pada pantulan:
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0),
rgba(0,0,0,0.4));
}