Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Menambahkan Efek Pada Icon Menggunakan CSS3 Part 1.

CSS3 adalah pengembangan dari CSS versi sebelumnya. Adapun fungsi dari CSS itu sendiri adalah untuk mendesain dan mempercantik tampilan website kita. Seiring perkembangannya CSS sekarang dapat di gunakan pada pemrograman android juga. tapi pada artikel kali ini saya akan membahas CSS yang di hubungkan ke HTML untuk memberi animasi pada icon.

Ikon ialah simbol antarmuka grafik di sebuah data yang digambarkan oleh gambar kecil yang menggambarkan program komputer ataupun berkas komputer dalam manajer berkas sebuah sistem operasi. Dibuat melalui manipulasi langsung atas simbol, sering ditunjuk melalui tetikus, sehingga pengguna dapat menjalankan fungsinya dengan menggerakkan tetikus tersebut. Ikon juga digunakan di perangkat lunak. Ikon sering ditempatkan di sebuah toolbar yang bisa dijalankan fungsinya oleh pengguna dalam program itu dengan mengklik ikon itu.

Sekarang saya akan mencoba memberikan tutorial singkat tentang Cara Menambahkan Efek Pada Icon Menggunakan CSS3 Part 1, pada part 1 kali ini saya akan mencoba memberi efek animasi slide roll over pada icon social media.

– Pertama teman-teman harus mempunya gambar atau ikon yang mempunya dua latar background berbeda dalam satu file .png atau jpeg dan simpan dalam satu folder icon.

– Kedua Teman-teman masukan kode HTML di bawah ini:

Nah pada tag HTML di atas saya sudah membuat link ke CSS untuk menghubungkan HTML dengan CSS.

– Ketiga teman-teman buat kode CSS3 di bawah ini, dan untuk penjelasannya sudah ada commenting dalam kode CSS3 di bawah ini:

Hasilnya akan seperti ini :

Cara Menambahkan Efek Pada Icon Menggunakan CSS3 Part 1-1

– Keempat kita tambahkan kode CSS3 untuk memberi animasi slide rollover pada icon:

Hasilnya akan menjadi seperti ini:

Cara Menambahkan Efek Pada Icon Menggunakan CSS3 Part 1-2

Pada saat kita hover maka efek slide pada icon akan berfungsi.

Bagaimana teman-teman mudahkan Menambahkan Efek Pada Icon Menggunakan CSS3 Part 1.

Sekian tutorial saya untuk kali ini tentang Cara Menambahkan Efek Pada Icon Menggunakan CSS3 Part 1. Maaf bila ada kesalahan dalam tutorialnya. Pada tutorial berikutnya saya akan mencoba memberi efek yang berbeda yaitu spin rollover dimana icon akan memutar pada saat kita hover dan berubah warnanya.

Sehat selalu ya teman-teman, selamat mencoba.