How to create chatbox with CSS?
The chatbox is an interface used to exchange messages between two or more people. The chatbox is very popular and is almost used everywhere over the internet. The chatbox contains the profile pic of both the user along the message contents. This chatbox can be designed with CSS.
Creating a chatbox with CSS
Here, we are creating a chatbox where two people are sharing text messages.
Let us take a <div> element that will be a wrapper to the chat messages. specify the height and width of the <div>.
Now define two <div> inside the container <div>. Add <image> to each <div> which will float: left. Add some textual content and time of the sent message. The time will float: right. Finally, remove the float using CSS clear property so that the elements do not overlap each other. Add different background-color to distinguish between the chats. Add some margin and padding too.
Example: Creating a chatbox with CSS
Here, we have created a simple chatbox where the two people are sharing text messages.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.container {
width: 500px;
height: 500px;
background-color: transparent ;
box-shadow: 2px 1px 1px 1px rgba(0,0,0,0.2);
}
img {
border-radius: 50%;
height: 50px;
width: 50px;
float: left;
}
.time {
float: right;
}
.you {
background-color: #cccccc;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
}
.other {
background-color: #eeeeee;
border-color: #dddddd;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
}
.you:after, .other:after{
content: "";
clear: both;
display: table;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h2> Chatbox </h2>
<div class="you">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1628591248-101156.png" >
<p> hi</p>
<span class="time">10:00</span>
</div>
<div class="other">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1628591319-101156.png">
<p> Hello!!! </p>
<span class="time">12:01</span>
</div>
<div class="you">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1628591248-101156.png" >
<p> wats up</p>
<span class="time">12:03</span>
</div>
<div class="other">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1628591319-101156.png">
<p> I am fine </p>
<span class="time">12:10</span>
</div>
</div>
</body>
</html>
Output
Here is the output of the above program.
Example: Creating a chatbox with CSS
In this example, we have another template of the chatbox where we have added the profile picture of another end with the name at the top. And added with some background color.
Conclusion
In this tutorial, we have learned to create a chatbox with CSS. We have used multiple CSS properties to design a simple chatbox. You can experiment and shuffle elements to create different templates for chatboxes.
