In this tutorial I will show you how to create Facebook style chat bubbles using CSS only.
CSS Code for Chat Bubbles
Here is how chat bubbles look
Here is the CSS code for chat bubbles
{
display: inline-block;
max-width: 200px;
background-color: white;
padding: 5px;
border-radius: 4px;
position: relative;
border-width: 1px;
border-style: solid;
border-color: grey;
}
left
{
float: left;
}
span.left:after
{
content: "";
display: inline-block;
position: absolute;
left: -8.5px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid white;
}
span.left:before
{
content: "";
display: inline-block;
position: absolute;
left: -9px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid black;
}
span.right:after
{
content: "";
display: inline-block;
position: absolute;
right: -8px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #dbedfe;
}
span.right:before
{
content: "";
display: inline-block;
position: absolute;
right: -9px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid black;
}
span.right
{
float: right;
background-color: #dbedfe;
}
.clear
{
clear: both;
}
Here is the HTML markup to display chat bubbles
Here we are using CSS3 puedo elements to create triangles that appear in left/right of bubbles. We have two triangles for every bubble. First one is completely black and the other one is completely white. Second triangle overlays the first triangle creating a triangle with two black borders and one white border. Its a hacky design.
Complete Source Code
I have created a facebook style chat box and place bubbles in it. Here is the complete source code
<html>
<head>
<title>Facebook Style Chat Bubbles Demo</title>
<style type="text/css">
.chat-box
{
width: 300px;
}
.header
{
padding: 10px;
color: white;
font-size: 14px;
font-weight: bold;
background-color: #6d84b4;
}
.messages
{
padding: 10px;
height: 200px;
background-color: green;
background-color: rgb(237, 239, 244);
border-width: 1px;
border-color: black;
border-style: solid;
overflow-y: scroll;
}
.messages ul
{
padding: 0px;
list-style-type: none;
}
.messages ul li
{
height: auto;
margin-bottom: 10px;
clear: both;
padding-left: 10px;
padding-right: 10px;
}
.messages ul li span
{
display: inline-block;
max-width: 200px;
background-color: white;
padding: 5px;
border-radius: 4px;
position: relative;
border-width: 1px;
border-style: solid;
border-color: grey;
}
.messages ul li span.left
{
float: left;
}
.messages ul li span.left:after
{
content: "";
display: inline-block;
position: absolute;
left: -8.5px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid white;
}
.messages ul li span.left:before
{
content: "";
display: inline-block;
position: absolute;
left: -9px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid black;
}
.messages ul li span.right:after
{
content: "";
display: inline-block;
position: absolute;
right: -8px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #dbedfe;
}
.messages ul li span.right:before
{
content: "";
display: inline-block;
position: absolute;
right: -9px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid black;
}
.messages ul li span.right
{
float: right;
background-color: #dbedfe;
}
.clear
{
clear: both;
}
.input-box
{
background-color: white;
height: 50px;
padding: 0px;
}
.input-box textarea
{
padding: 0px;
width: 278px;
height: 100%;
display: inline-block;
outline: 0px;
border-width: 0px;
resize: none;
border-width: 1px;
border-color: black;
border-style: solid;
font-size: 12px;
padding: 10px;
border-top-width: 0px;
}
</style>
</head>
<body>
<div class="chat-box">
<div class="header">
Narayan Prusty
</div>
<div id="messages" class="messages">
<ul>
<li>
<span class="left">Hello</span>
<div class="clear"></div>
</li>
<li>
<span class="left">Are you there?</span>
<div class="clear"></div>
</li>
<li>
<span class="right">Yes I am here</span>
<div class="clear"></div>
</li>
<li>
<span class="left">Thanks for accepting my friend request</span>
<div class="clear"></div>
</li>
<li>
<span class="right">You Welcome</span>
<div class="clear"></div>
</li>
<li>
<span class="left">Bye</span>
<div class="clear"></div>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="input-box">
<textarea placeholder="Enter message"></textarea>
</div>
</div>
</body>
</html>