Hover Background Transitions CSS3

Transitions dalam CSS3 bisa diartikan sebagai perubahan warna yang bisa kita gunakan untuk merubah warna background pada bagian element halaman tertentu. Transition ini mungkin hampir sama dengan hover pada tautan link yaitu ketika mouse menyentuh link maka link tersebut bisa berubah warna, teks, ataupun backgroundnya sesuai dengan pengaturan tautan link anda.

Saya coba membuat Transitions CSS3 ini pada bagian Body komentar, untuk contoh silahkan arahkan kursor mouse anda pada bagian body komentar di blog ini. Pada saat kursor menyentuh bagian body comentar, background body comentar akan berubah warna.

Untuk cara pembuatan Transitions CSS3 ini bisa langsung ikuti caranya di bawah ini.

Pertama masuk pada Edit HTML
Cari kode seperti dibawah ini

#comments-block .comment-body {
background-color: #DEB887;
margin:.25em 0 0;
}

Tambahkan kode Transitions CSS3 seperti ini.

background-color: #DEB887;
-o-transition-property: background-color;
-o-transition-duration: 1s;
}

Lanjutkan dengan menambahkan kode Hover Transitions nya seperti di bawah ini. letakan tepat dibawah kode di atas.

#comments-block .comment-body:hover { background-color:#b0b0b0; }

Maka hasil kode keseluruhan akan seperti ini.

#comments-block .comment-body {
background-color: #DEB887;
-o-transition-property: background-color;
-o-transition-duration: 1s;
margin:.25em 0 0;
}

#comments-block .comment-body:hover { background-color:#b0b0b0; }

Jika sudah silahkan di save dan anda lihat hasilnya.

Transitions ini bisa juga di terapkan pada bagian bagian posting, sidebar, foter dll. untuk caranya hampir sama dengan diatas.

NB : Silahkan ganti kode warna untuk background dasar comments-block dan hover transitions dengan mengganti teks yang di cetak tebal.
Bagian -o-transition-duration: 1s; merupakan pengaturan untuk mengatur cepat lambat pergantian transition , silahkan dirubah pada bagian "1s" semakin besar angkanya maka akan semakin lambat pergerakannya.

Komentar

Chugy mengatakan…
Silahkan arahkan kursor mouse pada body komentar ini.
untuk kode body comment tentu akan berbeda dengan templte anda . Kode templte yang saya gunakan untuk contoh di atas yaitu templte MINIMA.

Jadi silahkan disesuaikan. Selamat mencoba membuat Hover Background Transitions dengan CSS3
fb mengatakan…
Mantap juga nih hovernya..
Ferdinand mengatakan…
Wah mantabz.... hampir kaya tutorial bikin kotak komentarnya bang Hendro nie Brader hhe.... terus kembangkan Sob...

sebelumnya maf bgt nie brader aku baru bisa mampir hhe.. Semangat n Happy blogging Sob...
Hitam Putih Kehidupan mengatakan…
keren banget mas..
hebat..hebat...

bisa dicoba ntr mas
Suparyanto mengatakan…
Ilmunya bagus banget. Sama,punya saya juga pakai template minima,bisa tak praktikkan sahabat.
Belajar CorelDRAW mengatakan…
Kalau untuk commentnya khusus admin bisa gak nich tutorialnya diterapkan?
Chugy mengatakan…
Belajar CorelDRAW :: Kebetulan saya tidak memasang comment khusus admin jadi belum saya coba menerapkan Transitions, mungkin akan saya coba nanti. trimakasih
Unknown mengatakan…
wah kupake di tempatku koq yg berubah warna cuma border ya brad?...masih sama persis warna sama disini...cuman border aja yg brubah saat kursor di dekatkan...gmn tu ya brad?
Chugy mengatakan…
Belantara Indonesia :: Coba bordernya dihilangkan dulu brader. jangan mengguakan border dahulu. dicek lagi brader.
Chugy mengatakan…
Belantara Indonesia :: Setelah saya cek code template si brader, ternyata si brader salah memasukan kode transitionnya. kode si brader seperti ini

#comments-block .comment-body p{background-color: #DEB887;
-o-transition-property: background-color;
-o-transition-duration: 1s;
margin:0 0 0.75em}#comments-block .comment-body:hover { background-color:#b0b0b0; }

Aturan si brader memasukan kode transitionnya pada
#comments-block .comment-body{

bukan yang ini

#comments-block .comment-body p{

Diteliti lagi brader...codenya template si brader terlalu rapat jadi harus teliti dalam melihatya.
Unknown mengatakan…
oke dah aku ulangi...thx master....kekekkekee
Unknown mengatakan…
sudah terlaksana..tinggal mau bikin kotaknya ber hover ni...
Blogger mengatakan…
wah kren sob hmmm boleh juga nech kalo dicoba biar ketularan kren hehe
Sukses Slalu!
Shudai Ajlani mengatakan…
oke aku save ya sob :D
penghuni60 mengatakan…
aku save dulu ya bwt diplajari

mampir sob ada update Fenomena Telur Berdiri nih...
niesa mengatakan…
wah bagus ni..!!ini yang saya cari2.
makasih yaa...tipsnya.
om rame mengatakan…
jadi keren nih kotak komentarnya pengunjungnya, bisa berubah2 warna. manteb deh.

Postingan populer dari blog ini

Motion Tween dan Shape Tween

Mengenal Symbol dalam Animasi Flash

Membuat Bayangan Di Dalam Text