0 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.

Tweet

Komentar →