Efek Cermin Dengan CSS3

hai sobat,kali ini saya akan kasih tau gimana cara'a menambahkan efek Cermin atau Reflections pada gambar yang kita inginkan.contoh'a bisa sobat lihat disini .ini dia cara'a,Cekidot gan...


Cara'a mudah kq,sobat tinggal copy paste kode ini ke template kamu.
kode dibawah ini adalah css yang mempengaruhi efek cermin pada gambar

-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));

lalu sobat cari kata :

img { 

di template sobat,lalu copy paste css dibawah ini di css gambar sobat.

jadi seperti ini

img {
-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));
}

selesai deh.dengan cara diatas,akibat'a semua gambar di blog sobat,akan berefek cermin semua..
karena secara umum,semua gambar menggunakan tag "img"
nah loh!!!jangan panik ya...jika sobat ga mau pake cara diatas,ada cara alternatif nih n_n

Pertama,masukan Css ini di tempate sobat

.post-image {
float: left;
-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));
-webkit-border-radius: 3px;
}

lalu sobat copy paste juga kode html di bawah ini

<img alt="Some title" class="post-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwfRGRCudPfzR_Jbx5Av0tZH8w-cwYruSRXQfNo_-y6PWJHzEQ5_5QCadMoizyNwdTg9EVREWIZeSoKIwGsMwnMMP6erjJ6vRUqlVPg19pmjpoteWjxNN2jFr7b6eivlUh_MvYGxJ_sIs/s1600/Untitled-2.jpg" />

Url gambar bisa sobat ganti

Selesai deh,dengan cara ini,sobat bisa menentukan sendiri gambar mana yang akan diberi efek cermin n_n selamat mencoba,dan jangan lupa backup dlu template sobat sebelum Berexperimen


mudah bukan?silakan dicoba...