Css3 Reflect : Efek Cermin (mirror) Pada Gambar Dan Teks

Situseo Blog : Efek bayangan seperti cermin pada sebuah gambar atau teks sudah bisa dibuat dengan menggunakan css, lebih tepatnya css3 reflect, bagi kalian yang tidak begitu mahir dalam penggunaan software gambar seperti Adobe Photoshop, css3 reflect bisa menjadi solusi untuk membuat efek cermin untuk gambar, untuk menghasilkan efek cermin atau bayangan tidak membutuhkan kode css yang panjang, tidak seperti membuat efek-efek css3 pada umumnya.

Kode utama dalam membuat efek cermin atau bayangan pada gambar dan teks adalah -webkit-box-reflect: efek cermin ini tidak hanya memantulkan bayangan ke-bawah saja, melainkan bisa ke-atas, kiri dan kanan, coba perhatikan kode reflect css3 ini :

-webkit-box-reflect: above;
-webkit-box-reflect: below;
-webkit-box-reflect: left;
-webkit-box-reflect: right;

kode tersebut merupakan kode untuk membuat efek cermin dengan bayangan atas, bawah, kiri dan kanan, sebagai contoh perhatikan efek cermin dibawah ini :

untuk menghasilkan efek cermin seperti contoh diatas, penggunaan kode css-nya seperti ini :

-webkit-box-reflect: right 10px;

right menunjukan efek bayangan berada disebelah kanan gambar, sedangkan 10px adalah jarak dari gambar asli dengan efek cermin yang terjadi, seperti dalam contoh menggunkan 10px untuk jaraknya, kalian bisa mengubah jaraknya sesuai dengan keinginan atau menghilangkan jarak efek cermin tersebut.

dalam contoh diatas efek cermin yang tejadi adalah pantulan secara keseluruhan gambar, kalian bisa modifikasi tampilan efek cermin tersebut hanya tampil setengah pantulan gambar, sebagai contoh bisa melihat efek cermin dibawah ini :

efek cermin yang dihasilkan hanya menampilkan sebagian dari pantulan dari gambar, untuk membuat efek cermin seperti itu hanya menambahkan background gradient untuk layar pantulnya, kode gradient yang ditambahkan :

-webkit-box-reflect: right 10px -webkit-gradient(linear, left top, right top, from(transparent), color-stop(50%, transparent), to(white));

Efek cermin ini bisa kalian gunakan pada blog untuk menghias tampilan gambar atau sebuah teks. Sebagai contoh untuk tampilan gambar yang terpasang pada bagian posting (artikel). Untuk menghasilkan efek cermin pada gambar yang ada pada postingan, caranya masuk menu Edit HTML dan cari kode .post-image { dan tambahkan kode efek cermin tersebut, sehingga menjadi seperti ini :

.post-image {
-webkit-box-reflect: right 10px -webkit-gradient(linear, left top, right top, from(transparent), color-stop(50%, transparent), to(white));
...kode css lainnya;
}

-webkit-box-reflect: tidak hanya bisa digunakan pada gambar atau teks pada posting saja, melainkan bisa dipergunakan untuk efek pada bagian-bagian lainnya, untuk hal ini kalian sendiri yang menentukan dipergunakan untuk apa efek -webkit-box-reflect: dipergunakan.

Kalian bisa melihat contoh efek cermin yang dihasilkan dari berbagai arah, seperti dibawah ini :

Efek Cermin Gambar Menggunakan Layar Pantul Gambar (image)
Selain menggunakan layar pantul sebuah background gradient, bisa juga mengunakan layar pantul cermin mengunakan layar gambar, sebagai contoh saya akan menggunakan layar pantul dengan menggunakan gambar seperti dibawah ini :

Efek cermin yang dihasilkan akan mengikuti layar patul gambar tersebut, dan hasilnya seperti ini :

Efek Cermin Pada Sebuah Teks Atau Tulisan
Sebuah teks atau kalimat juga bisa mempunyai efek cermin dengan menggunakan kode diatas, sebagai contoh seperti kaliamat dibawah ini :

Situseo Blog

Semoga bermanfaat,