Membuat ikon sosial media menggunakan CSS + Efek
Sosial ikon yang akan saya bagikan kali ini terinspirasi dari sosial-sosial ikon yang pernah saya lihat di situs-situs yang bisa di bilang sudah kelas Dewa. Tapi yang jelas, source yang di gunakan tidak sama. Yang saya lihat dan menjadi inspirasi tersebut, masih menggunakan gambar atau lebih tepatnya gambar berbasis "Image Sprites".
Kamu tentu sudah tahu dengan apa itu Image Sprites. Kalau belum atau masih ragu, Image Sprites adalah penggabungan beberapa gambar murni dan menjadikannya satu kesatuan. Posisi gambar dapat di atur sepenuhnya pada CSS dan pixel (px) yang nantinya akan mengatur gambar, maupun jarak gambar satu dengan gambar yang lainnya.
Bagi mereka yang sudah menggunakan domain sendiri, hal ini tentu tidak akan menjadi sebuah masalah karena mereka tidak akan tersandung pada masalah "Leverage browser caching".
Saya sendiri telah menerapkan sosial ikon ini di blog yang terdahulu. Yah, kurang lebih setahun belakangan lah. Jadi ini adalah backupan CSS yang pernah saya simpan di Notepad.
Jadi yang akan saya bagikan ini murni mengandalkan CSS dan hanya menggunakan Font Icon sebagai penampil ikon-ikonnya.
Langsung ke demonya,
Sebelum menambahkan kode CSSnya, tambahkan dulu kode font ini dan tempatkan setelah kode <head> pada template.
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
Dan inilah kode CSSnya. Agar lebih mudah di pahami, saya menyertakan beberapa keterangan pada poin-poin utamanya.
ul.my-social {
margin:60px auto; /* Jarak sosial ikon dengan element lain */
padding:0;
list-style:none;
perspective:10000px;
text-align:center;
}
ul.my-social li {
display:inline-block;
width:180px; /* Lebar */
height:180px; /* Tinggi */
margin:10px; /* jarak dengan elemen sekitar */
background:#FFF; /* Warna latar */
}
ul.my-social li a {
display:table;
font-size:90px; /* Ukuran ikon */
line-height:170px;
width:100%;
height:100%;
border-radius:100%; /* Border radius */
box-shadow:inset 0 0 20px 4px rgba(87,87,87,0.2);
cursor:pointer;
margin-bottom:14px; /* Jarak ikon dengan judul */
color:#FFF; /* Warna ikon */
text-shadow:1px 1px #111;
text-decoration:none;
outline:none;
transition:all 0.7s ease-out;
transform:scale(0.9); /* Setelan skala untuk mode siaga */
}
ul.my-social li:nth-of-type(1) a {
background:#3a5999; /* Warna latar untuk ikon ke 1 */
}
ul.my-social li:nth-of-type(2) a {
background:#d14836; /* Warna latar untuk ikon ke 2 */
}
ul.my-social li:nth-of-type(3) a {
background:#FFB200; /* Warna latar untuk ikon ke 3 */
}
ul.my-social li:nth-of-type(4) a {
background:#3aa9de; /* Warna latar untuk ikon ke 4 */
}
ul.my-social li b {
display:block;
position:relative;
width:100%;
opacity:0; /* Perintah untuk menyembunyikan judul */
font-family:'Poiret One',cursive; /* Nama dan Jenis font */
font-size:22px; /* ukuran fontnya */
transition:all 1s ease-out;
}
ul.my-social li:hover a {
transform:scale(1.0); /* Setelan skala saat di hover */
}
ul.my-social li:hover b {
opacity:1; /* Perintah untuk menampilkan judul */
transform:rotateY(360deg);
transition-delay:0.2s;
}
Font yang saya gunakan agar tampilannya lebih keren adalah "Poiret One". Kalau kurang suka, silahkan hapus dan ganti dengan font yang di inginkan.
Ukuran yang di gunakan hanya contoh, agar penempatannya lebih pas, tentu kamu harus menyesuaikan ukurannya dengan kebutuhan. begitu juga dengan jumlah ikon yang akan di tampilkan. Pada CSS yang saya bagikan, saya hanya menampilkan 5 ikon, jika ingin menambah, kamu dapat menambah ikon yang kamu butuhkan. Contoh,
ul.my-social li:nth-of-type(5) a {
background:#Kode Warna; /* Warna latar untuk ikon ke 5 */
}Begitu seterusnya. Jadi tidak ada batasan untuk jumlah maksimal dari ikon yang akan di tampilkan. Dan jangan lupa untuk mengganti Kode warna dengan warna yang kamu inginkan.
Untuk ikon yang di gunakan adalah Font Awesome.
Dan berikut kode HTMLnya,
<ul class="my-social"> <li><a href="#"><i class="fa fa-facebook"></i></a> <b>Facebook</b></li> <li><a href="#"><i class="fa fa-google-plus"></i></a> <b>Google Plus</b></li> <li><a href="#"><i class="fa fa-rss"></i></a> <b>RSS</b></li> <li><a href="#"><i class="fa fa-twitter"></i></a> <b>Twitter</b></li> </ul>
Jangan lupa untuk mengganti tanda "#" dengan url yang kamu inginkan! ;)
Untuk tampilannya sendiri sudah saya uji coba dan mampu bekerja dengan baik pada browser Mozilla Firefox, Internet Explorer 11 dan Google Chrome!
0 komentar:
Post a Comment
Kolom komentar tersedia hanya untuk diskusi dan bukan sarana untuk promosi.
Komentar menggunakan media sosial seperti Facebook dan lain-lain sengaja di nonaktifkan karena sering di salahgunakan.
Mohon untuk tidak menyisipkan link promosi pada kolom komentar.