Tutorial Blog - Berbagai Efek Transisi pada Gambar

Hallo sobat apa kabarnih,,?? di tahun 2012 ini saya akan share Beberapa Eefek Transisi Pada Gambar. Trik kali ini bisa digunakan untuk membuat efek pada semua gambar di blog kita,langsung saja lah gak usah mundar mandir lagi cekidot,, Nih ane kasih beberapa efeknya :









Efek Bumping :

.post img{-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out}.post img:hover{-webkit-transform:translate(0px,10px);-moz-transform:translate(0px,-10px);-ms-transform:translate(0px,-10px);-o-transform:translate(0px,10px);transform:translate(0px,-10px)}

Efek Fade Out :

.post img{-webkit-transition:opacity .5s ease-out;-moz-transition:opacity .5s ease-out;-ms-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out}.post img:hover{opacity:.2}

Efek Fade In :

.post img{-webkit-transition:opacity .5s ease-out;-moz-transition:opacity .5s ease-out;-ms-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out;opacity:.2}.post img:hover{opacity:1}

Efek Rotasi :

.post img{-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out}.post img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}

Efek Membesar :

.post img{-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out}.post img:hover{-webkit-transform:scale(2,2);-moz-transform:scale(2,2);-ms-transform:scale(2,2);-o-transform:scale(2,2);transform:scale(2,2)}

Efek Skew :

.post img{-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out}.post img:hover{-webkit-transform:skew(30deg,20deg);-moz-transform:skew(30deg,20deg);-ms-transform:skew(30deg,20deg);-o-transform:skew(30deg,20deg);transform:skew(30deg,20deg)}

Untuk memasang efek ini di blog sobat sangatlah gampang berikut caranya :







1. Masuk Dasboard >> Template >> Edit HTML



2. Cari kode ]]></b:skin> Untuk lebih mudah dalam pencarian tekan ctrl+F



3. Letakan salah satu kode CSS efek transisi di atas kode no 2



4. save and done ^_^



Gimana bagus gak,,?? gak ya,,?? Jangan Lupa Komentar ya?,,.. Kalo mau Copas tulis Sumbernya ya sobat, kalo gak ditulis namanya PLAGIAT !

Demo Klik Disini

Ditulis Oleh : Yandi Mulyadi ~ Semua Artikel Menarik Ada Disini

Sobat sedang membaca artikel tentang Tutorial Blog - Berbagai Efek Transisi pada Gambar. Yang diketik tangan Oleh Admin Yandi Mulyadi, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya ya? <a href="http://mafiazblogger.blogspot.com/2012/09/tutorial-blog-berbagai-efek-transisi.html" target="_blank">Tutorial Blog - Berbagai Efek Transisi pada Gambar</a>

Artikel tersebut bisa Anda akses via mobile, klik disini.

Share this post :

Related Posts :