Refleksi Gambar CSS3 [Tips CSS3]
Sejauh ini, kami telah membahas banyak properti baru di CSS3. Selain itu, sebenarnya ada beberapa properti lain yang saat ini tidak termasuk dalam spesifikasi resmi CSS3 yang layak untuk dicoba, salah satunya adalah kotak-mencerminkan properti yang diprakarsai oleh Webkit. Properti ini dapat mencerminkan objek yang ditentukan.
Refleksi Dasar
Implementasi dasarnya cukup intuitif; katakanlah, kita ingin refleksi di bawah objek nyata. Kita bisa menulis:
img -webkit-box-reflect: di bawah ini;
Contoh ini menunjukkan bagaimana kita mencerminkan suatu gambar di bawah (posisi) objek. Tapi, dalam hal ini, kita juga bisa memegang refleksi ke kanan, kiri, dan atas.
Offset Refleksi
Mengimbangi digunakan untuk mendefinisikan kesenjangan antara refleksi dan objek nyata yang direfleksikan. Mari kita lihat cuplikan kode di bawah ini;
img -webkit-box-reflect: di bawah 10px;
Dalam kode di atas, kami memisahkan refleksi dari objek nyata dengan 10px;
- Lihat Demo
Masking dengan Gradien
Efek refleksi yang biasa kita lihat adalah fade-out di bagian bawah dan hanya menampilkan setengah atau kurang dari objek nyata. Untuk meniru efek semacam ini, kita bisa menerapkan CSS3 Gradien untuk menutupi objek, seperti itu;
-webkit-box-reflect: di bawah 0px -webkit-gradient (linear, kiri atas, kiri bawah, dari (transparan), ke (rgba (250, 250, 250, 0.1)));
Kode ini akan menghasilkan presentasi berikut;
Kita juga bisa menggunakan berhenti warna untuk mengontrol transisi dan membuat refleksi terlihat lebih baik:
img -webkit-box-reflect: di bawah 0px -webkit-gradient (linear, kiri atas, kiri bawah, dari (transparan), penghenti warna (70%, transparan), hingga (rgba (250, 250, 250, 0.1 )));
- Lihat Demo
Alternatif untuk Firefox
Namun, properti ini hanya berfungsi di browser Webkit (artinya Safari dan Chrome) saat ini. Untuk memberikan efek yang sama di Firefox, Anda perlu rute lain: menggunakan -elemen-moz () fungsi. Fungsi ini pada dasarnya akan menghasilkan atau mereplikasi konten dari elemen HTML tertentu. Mari kita lihat contoh berikut;
Kami memiliki gambar yang dibungkus dengan Dan, untuk mengadakan refleksi, kita akan gunakan Itu Sayangnya, masih belum ada cara mudah untuk membuatnya bagus efek refleksi di Firefox menggunakan praktik ini. Kode di atas hanya akan membuat refleksi, tanpa efek fade.moz-refleksi id;
:setelah elemen semu, sebagai berikut; # moz-reflect: after content: ""; display: blok; latar belakang: -moz-element (# moz-reflect) no-repeat; lebar: otomatis; tinggi: 375px; margin-bottom: 100px; -moz-transform: scaleY (-1);
-moz-transform dengan skala negatif digunakan untuk membalikkan objek yang dihasilkan terbalik. Juga, pastikan tinggi cukup tepat untuk objek nyata tinggi untuk menghindari garis tambahan yang tidak perlu untuk memposisikan refleksi.Referensi Lebih Lanjut
