Cara Mudah Membuat Contact Chips Pure Css
Sabtu, 26 Januari 2019
Untuk tutorial yang akan saya angkat adalah cara membuat sebuah contact chips, yang dimana ini dapat dikategorikan sebagai tutorial termudah.
Kok tutorial termudah? Ya memang, karena menurut saya ini yang sangat-sangat mudah di cerna dan simple. Tujuannya, agar dapat dimengerti dan tidak ada tingkat kerumitannya sama sekali.
Bagaimana Cara Membuatnya?
Mudah sekali, kode-kodenya pun bisa dibilang yang paling irit atau sedikit. Kenapa namanya Contact Chips? Karena bisa dikatakan Contact Chips ini sama persis dengan Name Tags atau sebagai tanda pengenal. Namun bedanya kalau Contact Chips dibuat sesimple mungkin hanya terdapat foto dan nama kalian saja.
Jika kalian ingin membuatnya dan menerapkannya pada website atau blog kalian, saya sarankan tempel dibawah navbar supaya terlihat menarik.
Mungkin kita langsung saja untuk mempraktekannya, tidak perlu berlama-lama lagi. Untuk cara pembuatannya bisa perhatikan langkah dibawah ini.
Langkah pertama, seperti biasa buatlah sebuah file css dan beri nama style.css lalu kalian copy paste kode css berikut:
.contactchips {
display: inline-block;
padding: 0 25px;
height: 50px;
font-size: 16px;
line-height: 50px;
border-radius: 25px;
background-color: #f1f1f1;
}
.contactchips img {
float: left;
margin: 0 10px 0 -25px;
height: 50px;
width: 50px;
border-radius: 50%;
}
Selanjutnya yaitu, kalian buat file html nya, bisa index.html atau terserah kalian. Kemudian copy lagi kode html berikut:
<div class="contactchips">
<img src="img_avatar.png" alt="Person" width="96" height="96">
Virm Aditya
</div>
Lalu pastekan kedalam file index.html tersebut, yang telah dibuat tadi. Untuk kode keseluruhannya bisa dilihat dibawah ini:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.contactchips {
display: inline-block;
padding: 0 25px;
height: 50px;
font-size: 16px;
line-height: 50px;
border-radius: 25px;
background-color: #f1f1f1;
}
.contactchips img {
float: left;
margin: 0 10px 0 -25px;
height: 50px;
width: 50px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="contactchips">
<img src="img_avatar.png" alt="Person" width="96" height="96">
Virm Aditya
</div>
</body>
</html>
Untuk link foto dan nama, bisa kalian rubah dengan link foto dan nama kalian lalu klik simpan.Bagaimana hasilnya? Bisa kalian lihat sendiri hasil Contact Chips tersebut. Adapun saya lampirkan untuk demonya dibawah ini:
Live Demo
Mungkin itu saja yang bisa saya berikan pada artikel tutorial kali ini, mudah-mudahan dapat bermanfaat.
