Refleksi Imej CSS3 [Tips CSS3]
Setakat ini, kami telah membincangkan banyak hartanah baharu dalam CSS3. Selain itu, sebenarnya terdapat beberapa sifat lain yang tidak termasuk dalam spesifikasi rasmi CSS3 yang patut dicuba, salah satunya ialah kotak-mencerminkan harta yang dimulakan oleh Webkit. Harta ini boleh mencerminkan objek yang ditentukan.
Refleksi Asas
Pelaksanaan dasar cukup intuitif; katakan, kita mahu refleksi di bawah objek sebenar. Kita boleh menulis:
img -webkit-box-reflect: below;
Contoh ini menunjukkan bagaimana kita mencerminkan imej di bawah (kedudukan) objek itu. Tetapi, dalam kes ini, kita juga boleh mengadakan refleksi kepada betul, ditinggalkan, dan di atas.
Offset Refleksi
Offset digunakan untuk menentukan jurang antara refleksi dan objek sebenar yang dicerminkan. Mari lihat coretan kod di bawah;
img -webkit-box-reflect: below 10px;
Dalam kod di atas, kami memisahkan pantulan dari objek sebenar oleh 10px;
- Lihat Demo
Masking dengan Gradien
Kesan pantulan yang biasa kita lihat adalah pudar di bahagian bawah dan memaparkan hanya separuh atau kurang objek sebenar. Untuk meniru jenis kesan ini, kami boleh memohon Kecerunan CSS3 untuk menutup objek, seperti itu;
-webkit-box-reflect: below 0px -webkit-gradient (linear, top left, bottom left, from (transparent), to (rgba (250, 250, 250, 0.1)));
Kod ini akan menghasilkan persembahan berikut;
Kita juga boleh menggunakannya hentikan warna untuk mengawal peralihan dan membuat refleksi kelihatan lebih baik:
img -webkit-box-reflect: di bawah 0px -webkit-gradien (linear, kiri atas, kiri bawah, dari (telus), berhenti warna (70%, telus), hingga (rgba (250, 250, 250, )));
- Lihat Demo
Alternatif untuk Firefox
Harta ini, bagaimanapun, hanya berfungsi dalam penyemak imbas Webkit (yang bermaksud Safari dan Chrome) pada masa ini. Untuk memberikan kesan yang sama di Firefox, anda memerlukan laluan lain: menggunakan -moz-element () fungsi. Fungsi ini pada asasnya akan menjana atau meniru kandungan dari elemen HTML tertentu. Mari lihat contoh berikut;
Kami mempunyai imej yang dibungkus dalam a Dan, untuk memegang pantulan, kami akan menggunakannya The Malangnya, masih tiada cara mudah untuk mencipta bagus kesan pantulan dalam Firefox menggunakan amalan ini. Kod di atas hanya akan mewujudkan pantulan, tanpa kesan pudar.moz-reflect ID;
: selepas pseudo-element, seperti berikut; # moz-reflect: after content: ""; paparan: blok; latar belakang: -moz-element (# moz-reflect) no-repeat; lebar: auto; ketinggian: 375px; margin-bottom: 100px; -moz-transform: skalaY (-1);
-moz-transform dengan skala negatif digunakan untuk membalikkan objek yang dihasilkan terbalik. Juga, pastikan yang ketinggian cukup tepat untuk objek sebenar ketinggian untuk mengelakkan garisan tambahan yang tidak perlu untuk meletakkan refleksi.Rujukan lanjut
