Membuat Css Refleksi Cermin

Cara Membuat Css Reflect - Membuat bayangan Refleksi Objek layaknya cermin tentu hal yang sangat mudah jika dibuat dengan menggunakan Photoshop . Namun kita tidak akan membahasnya disini , yang sekarang kita bahas adalah cara membuat efek refleksi pada object biasanya gambar dengan menggunakan Css saja .

Css untuk membuat bayangan refleksi ini terbilang cukup simple dan sederhana tidak seperti css untuk efek efek lainnya .

Efek Pantul Pada Gambar

Pada dasarnya Css untuk membuat bayangan efek refleksi hanya membutuhkan pengkodean seperti dibawah ini

-webkit-box-reflect:

Pemantulan bayangan tidak hanya ke bawah saja , bisa ke atas , samping , kanan atau kiri . Coba perhatikan Css nya dibawah 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 bayangan seperti gambar diatas kita hanya menggunakan -webkit-box-reflect: right 10px; .

Note:

right; bertujuan untuk menghasilkan bayangan berada di sebelah kanan dan 10px adalah jarak bayangan dan gambar asli . Anda bisa mengubahnya sesuai dengan kebutuhan anda sendiri .

Pada contoh gambar diatas yang terjadi adalah gambar memantul sempurna , disini kita bisa memainkan pantulannya agar tampak seperti pantulan gambar di lantai kaca . Kita bisa membuat gambar hanya memantul separuh misalnya .

Disini kita gunakan efek Css nya seperti dibawah ini

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

Efek ini bisa kita terapkan semisal apda logo gambar dengan memberi Css seprti dibawah ini pada template

.header img {

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

css... lainnya ...

}

Silahkan dikreasikan sendiri kemana arah bayangan pada gambar tersebut dengan menggunakan keterangan rigth,left,above atau below seperti pada Css diatas .

Efek Pantul Pada Text

Selain dari gambar , kita juga bisa membuat efek Reflect ini pada text . Tentu dengan Css yang sama

Go Blogination

Semoga Informasi Cara Membuat Css Reflect ini bermanfaat untuk kita semua .