Cara Menambahkan Efek Pada Icon Menggunakan CSS3 Part 1

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:

<!DOCTYPE html>
<html>
<head>

	<title>Efek pada icon</title>
	<link rel="stylesheet" href="style.css">

</head>
<body>

<div class="container">
  <h1>Dumetschool</h1>
  <div class="social-slide ig"></div>
  <div class="social-slide tumblr"></div>
  <div class="social-slide twitter"></div>
  <div class="social-slide skype"></div>
  <div class="social-slide wp"></div>
  <div class="social-slide pnt"></div>
</div>
	
</body>
</html>

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:

*{padding: 0; margin:0}
.container{width: 300px; margin: auto; text-align: center}


/*Memberi lebar dan tinggi pada icon dan memberikan transisi pada saat di hover*/
.social-slide {
  height: 48px;
  width: 48px;
  margin: 10px 1px;
  float: left;
}

/*menampilkan icon*/
.ig{  background-image: url('icon/ig-hover.png');}
.tumblr{background-image: url('icon/tumblr.png');}
.twitter{background-image: url('icon/twitter.png');}
.skype{background-image: url('icon/skype.png');}
.wp{background-image: url('icon/wp.png');}
.pnt{background-image: url('icon/pnt.png');}

Hasilnya akan seperti ini :

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

/*Memberi lebar dan tinggi pada icon dan memberikan transisi pada saat di hover*/
.social-slide {
  height: 48px;
  width: 48px;
  margin: 10px 1px;
  float: left;

  /*Tambahkan unutk memberikan efek transisi pada saat icon di hover*/
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  transition: all ease 0.3s;
}

.social-slide:hover {
  cursor: pointer;
  /*mengubah posisi icon dr latarnya abu-abu menjadi berwarna*/
  background-position: 0px -48px;
  box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}

Hasilnya akan menjadi seperti ini:

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.

Cara Menambahkan Efek Pada Icon Menggunakan CSS3 Part 1

Kategori