Membuat Transition Effect / Fade in-out Link dengan CSS

Jika sebelumnya saya pernah membahas tentang bagaimana membuat effect shadow pada link sebagai salah satu cara untuk mempercantik tampilan website/ blog. Maka kali ini saya akan berbagi cara membuat efek transisi pada link menggunakan CSS. Sebetulnya cara ini sudah saya temukan dan oprek beberapa minggu lalu. Namun karena dalam hal ini saya sekalian bereksperimen 😀 untuk tetap meningkatkan rank alexa, maka setiap postingan tak pernah langsung publish tapi selalu menunggu antrian schedule postingan sebelumnya.
Membuat Efek transisi ini maksudnya adalah efek perubahan property satu warna ke warna lainnya secara gradual dalam waktu tertentu (detik). Kaitannya dengan transisi pada link maka efek transisi link adalah perubahan satu warna ke warna lainnya pada link atau link dengan background-nya ketika link tersebut berada dalam hover state/ roll over (ketika link dihampiri mouse) ataupun roll out (link dijauhi mouse). Hmmmhh.., mudah-mudahan definisi saya gak bikin bingung deh, hehee… Kalau sobat memperhatikan secara seksama, sebetulnya cara tersebut sudah dipraktekkan di blog ini pada hampir semua jenis link. Coba saja dekatkan mouse pada link yang ada, atau untuk contoh yang paling jelas dan terlihat cantik bisa dilihat pada bagian bawah yaitu pada link-link recent posts, recent comments dan tag cloud. Cukup cantik bukan?? Dan lebih dari itu, berbeda dengan menghias link dengan warna pelangi dimana cara itu membutuhkan sebuah javascript, effect transisi ini murni menggunakan CSS dengan sedikit kode saja dan tidak menggunakan javascript sama sekali.
Untuk transisi pada link setidaknya ada beberapa jenis transisi yang bisa dibuat, yaitu transisi pada link saja dan transisi pada link dengan background. Cara itupun dapat dibuat dengan tambahan efek fade in saja atau dengan efek fade out.

Transisi Link tanpa Background

Untuk membuat transisi jenis ini, tambahkan kode di bawah ini pada CSS sesuai dengan tema yang digunakan. Sobat bisa menambahkannya dari cpanel atau melalui ftp, atau dapat pula langsung dari dashboard admin wordpress – Appearance – Editor – lalu edit file style.css dan tambahkan kode berikut pada property linknya.

a:active{text-decoration:none;color:#19727F;background:transparent;
-webkit-transition:background 1s ease, color 1s ease;}
a:hover{text-decoration:none;color:#FF5F00;background:transparent;
-webkit-transition:all 1s ease;}
Setelah itu save atau update style.css maka transisi link akan tampil seperti ini (dekatkan mouse pada link):

Agar lebih detail mari perhatikan kembali kode CSS di atas. Bagi pemula yang baru mengenal CSS, cara yang paling mudah untuk memakai transisi ini adalah cari kode seperti ini pada CSS a:active, a:visited dan seterusnya lalu ganti dengan kode di atas. Adapun untuk property warnanya dapat disesuaikan sendiri pada kode color:#XXXXXX. Selain sobat juga bisa menyesuaikan lama durasi transisi atau perubahan warna pada kode 1s yang berfungsi untuk mengatur lamanya transisi dalam hitungan detik. 1s berarti satu detik, 2s berarti 2 detik, atau bisa pula 0.5s yang berarti setengah detik saja. Sementara all mewakili property transisi keseluruhan, yang dalam hal ini adalah property background dan color.

Transisi Link dengan Background

Hampir sama dengan cara di atas, namun di sini kita tambahkan warna background untuk linknya. Lakukan cara yang sama seperti di atas dengan sedikit penambahan kode berikut:

a:active{text-decoration:none;color:#19727F;background:#ADDFFF;
-webkit-transition:background 1s ease, color 1s ease;}
a:hover{text-decoration:none;color:#FF5F00;background:#1569C7;
-webkit-transition:all 1s ease;}
Hasilnya seperti ini:

Transisi warna link ini dapat bekerja pada hampir semua browser modern saat ini, kecuali browser IE6. Kebanyakan browser saat ini sudah mampu menerjemahkan property webkit dengan baik. Namun sebagai langkah optional agar kode di atas dapat bekerja pada semua browser terutama Mozilla Firefox dan Opera dapat pula ditambahkan kode berikut:

a:active{text-decoration:none;color:#19727F;background:#ADDFFF;
-webkit-transition:background 1s ease, color 1s ease;}
a:hover{text-decoration:none;color:#FF5F00;background:#1569C7;
-webkit-transition:all 1s ease;
-moz-transition:background-color 1s ease;/*Optional untuk Mozilla Firefox*/
-o-transition:background-color 1s ease;}/*Optional untuk Opera*/
Ternyata mudah saja bukan? Banyak cara yang bisa dilakukan untuk menghias website/ blog dengan mudah. Selain itu cara ini juga murah, tidak perlu javascript dan kode yang ditambahkanpun hanya sedikit, namun tetap dengan hasil yang maksimal. Untuk menghias link saja setidaknya saya telah menulis tiga artikel yaitu artikel ini, membuat effect shadow/ bayangan pada link (link di atas), dan membuat link pelangi. Masih banyak yang ingin saya share, termasuk cara membuat effect fader seperti terlihat pada contoh di bawah. Tapi nanti saja deh, kalo dirasa banyak yang membutuhkan karena saya masih berbicara monolog saat ini. Masuk 5 bulan, sedikitnya lebih dari 175 unique visitor dan 350 page visit mengunjungi blog ini perharinya, namun saya tidak menemukan jejaknya 😥 . OK deh, moga bermanfaat…

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

Update: Efek transisi merupakan property yang hanya bisa diterapkan pada link saja, tapi untuk background-pun ada efek transisi warna atau gradasi warna yang disebut dengan gradient yang terdiri dari linear gradient dan radial gradient. Simak informasi dan cara membuatnya pada Mengenal Linear dan Radial Gradient. Selamat mencobda dan semoga bermanfaat!