April 15, 2012

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 pada gambar atau image

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,

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

16 April 2012 08.43  

keren mas saya suka templatenya keren saya akan sering kesini

-------------\
http://bloggerdesign3.blogspot.com/

16 April 2012 14.33  

bagus mas...saya mau coba

17 April 2012 14.35  

keren

9 Mei 2012 01.30  

Terimakasih Mas Dalang, Tipsnya mantap, baru di Blog ini saya temukan Tips dan Trik tampil beda

22 Juni 2012 02.39  

keren ni..
Css mank MAntap..

16 Agustus 2012 22.54  

blog,a asli dah mantep bner,,
ga bakal ada eang bisa copas,,asli ini mah buatan sendiri,,salut dah,,pasti mahasiswa nih eang bikin,, :D

16 November 2012 15.00  

Mas Dalang, tanya html+css text areanya mas dalang dong, kalau di hover yg muncul gradien biru. itu gmn? makasih

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top