Membuat Efek Transisi Background Dengan CSS3

CSS3 merupakan generasi terbaru untuk mendefinisikan style dari markup HTML. Jika sebelumnya CSS hanya kita gunakan untuk memberi efek-efek tertentu pada bagian markup, maka dengan munculnya teknologi terbaru Cascading Style Sheet (CSS) versi 3 ini, kombinasi efek menjadi lebih modern dan hidup.

Pada tutorial kali ini, saya akan memberikan sedikit trik efek background ketika mouse bergerak pada objek yang kita tuju, atau biasa kita sebut dengan Hover. Dengan menggunakan CSS3 transition, efek hover pada objek akan terasa sangat halus dan cukup modern. Perlu diingat bahwa penggunaan CSS3 tidak memerlukan library javascript atau pun Jquery.

Lihat Demo

Kita hanya memerlukan fungsi transisi CSS3 yang berupa penambahan kode transition dan sedikit modifikasi untuk pengenalan browser-browser tertentu, seperti -webkit- untuk Chrome,  -moz- untuk Firefox, -o- untuk Opera, dan -ms- untuk browser Internet Explorer 10, berikut adalah masing-masing kode transition CSS3 tersebut :

-webkit-transition: all 0.1s ease; /* Google Chrome */
-moz-transition: all 0.5s ease; /* Mozilla Firefox */
-o-transition: all 0.5s ease; /* Browser Opera */
-ms-transition: all 0.5s ease; /* Internet Explorer 10 */
transition: all 0.5s ease; /* Global */

 Tutorial

Kita mencoba memulai dengan persiapan pembuatan link menggunakan HTML. Pembuatan link ini kita beri atribut Class “mylink”. Fungsinya untuk mengidentifikasi fungsi CSS3. Berikut adalah kode link sederhana yang kita gunakan :

<a class="mylink" href="#">Link Mkhuda</a>

Hasilnya seperti berikut :

Kemudian, masih kita coba modifikasi link tersebut agar berbentuk balok dengan menambah beberapa fungsi CSS umum. CSS yang saya gunakan berupa kombinasi background dan padding. Kemudian kita tambahkan juga kode transition CSS3 pada elemen class “mylink”. Berikut adalah kode yang bisa Anda ketik :

a.mylink {
  background : grey;
  padding : 5px;
  color: white;
  text-decoration: none;
  -webkit-transition: all 0.5s ease; /* Google Chrome */
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5 ease;

Seperti ini hasilnya :

Sebagai tambahan, text-decoration: none; akan menghilangkan efek bergaris dan warna biru pada link yang kita buat. Sedangkan color: white; akan memberikan warna putih pada link tersebut.

Langkah selanjutnya, misalkan kita ingin memberikan efek fade (halus) dengan warna background berwarna biru mode. Maka kita tinggal menambahkan element hover pada a.mylink. Berikut adalah kodenya :

a.mylink:hover {
  background: blue;
}

Lihat Demo

Nah, seperti itulah praktik sederhana pemanfaatan transition atau transisi menggunakan CSS3 tanpa menggunakan library Javascript. Anda bisa mengubah delay transisi dengan mengganti kode 0.5s menjadi nilai tertentu, misalkan 1s hingga 2s. huruf s berarti second (detik).

Perlu kita ketahui juga bahwa penambahan properti “ease” dimaksudkan untuk mengatur kecepatan efek dari transisi atau untuk mengatur durasi transisi.