Cara Membuat Chat Message Dengan HTML dan CSS

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti March 9, 2021

Di bawah ini kita akan mempelajari cara membuat chat message dengan CSS. Chat message digunakan oleh para pengguna untuk saling bertukar obrolan. Chat ini biasa ada dalam kehidupan kita sehari-hari, seperti WA, FB dsb. Chat message yang aman adalah chat yang terenkripsi end to end. Tetapi kali ini kita akan membuat chat message sederhana menggunakan CSS yang mana bentuk chatnya bisa kita buat menggunakan HTML dan tampilannya menggunakan CSS. Seperti di bawah ini :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0 auto;
  max-width: 800px;
  padding: 0 20px;
}

.container {
  border: 2px solid #dedede;
  background-color: #f1f1f1;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
}

.darker {
  border-color: #ccc;
  background-color: #ddd;
}

.container::after {
  content: "";
  clear: both;
  display: table;
}

.container img {
  float: left;
  max-width: 60px;
  width: 100%;
  margin-right: 20px;
  border-radius: 50%;
}

.container img.right {
  float: right;
  margin-left: 20px;
  margin-right:0;
}

.time-right {
  float: right;
  color: #aaa;
}

.time-left {
  float: left;
  color: #999;
}
</style>
</head>
<body>

<h2>Chat Messages</h2>

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2021/02/136-1369892_avatar-people-person-business-user-man-character-avatar.png" alt="Avatar" style="width:100%;">
  <p>Hai, bagaimana keadaanmu? sudah baik-baik saja?</p>
  <span class="time-right">11:00</span>
</div>

<div class="container darker">
  <img src="https://dosenit.com/wp-content/uploads/2021/02/images.png" alt="Avatar" class="right" style="width:100%;">
  <p>yaa, sudah lebih baik sekarang</p>
  <span class="time-left">11:01</span>
</div>

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2021/02/136-1369892_avatar-people-person-business-user-man-character-avatar.png" alt="Avatar" style="width:100%;">
  <p>Oh! Baguslah, aku akan pergi ke rumahmu siang nanti, boleh kan?</p>
  <span class="time-right">11:02</span>
</div>

<div class="container darker">
  <img src="https://dosenit.com/wp-content/uploads/2021/02/images.png" alt="Avatar" class="right" style="width:100%;">
  <p>iyaa, aku tunggu kedatanganmu ya</p>
  <span class="time-left">11:05</span>
</div>

</body>
</html>

Cara Membuat Chat Message

Langkah 1) Tambahkan HTML:
Contoh

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2021/02/136-1369892_avatar-people-person-business-user-man-character-avatar.png" alt="Avatar" style="width:100%;">
  <p>Hai, bagaimana keadaanmu? sudah baik-baik saja?</p>
  <span class="time-right">11:00</span>
</div>

<div class="container darker">
  <img src="https://dosenit.com/wp-content/uploads/2021/02/images.png" alt="Avatar" class="right" style="width:100%;">
  <p>yaa, sudah lebih baik sekarang</p>
  <span class="time-left">11:01</span>
</div>

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2021/02/136-1369892_avatar-people-person-business-user-man-character-avatar.png" alt="Avatar" style="width:100%;">
  <p>Oh! Baguslah, aku akan pergi ke rumahmu siang nanti, boleh kan?</p>
  <span class="time-right">11:02</span>
</div>

<div class="container darker">
  <img src="https://dosenit.com/wp-content/uploads/2021/02/images.png" alt="Avatar" class="right" style="width:100%;">
  <p>iyaa, aku tunggu kedatanganmu ya</p>
  <span class="time-left">11:05</span>
</div>

Langkah 2) Tambahkan CSS:
Contoh

/* Chat containers */
.container {
  border: 2px solid #dedede;
  background-color: #f1f1f1;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
}

/* container obrolan yang lebih gelap*/
.darker {
  border-color: #ccc;
  background-color: #ddd;
}

/* Hapus floats */
.container::after {
  content: "";
  clear: both;
  display: table;
}

/* Style untuk gambar */
.container img {
  float: left;
  max-width: 60px;
  width: 100%;
  margin-right: 20px;
  border-radius: 50%;
}

/* Style untuk gambar sebelah kanan */
.container img.right {
  float: right;
  margin-left: 20px;
  margin-right:0;
}

/* Style untuk wakt teks */
.time-right {
  float: right;
  color: #aaa;
}

/* Style untuk wakt teks */
.time-left {
  float: left;
  color: #999;
}