This blog post is about creating simple chatbox speech bubbles. There are 4 separate classes. One for the chatbox conversation, second for the speech bubble, third and fourth for the two persons interacting respectively. The speech bubble has been given specified height and width. The speech bubble will be positioned accordingly giving the transformation and rotation degree. The conversation bubble will too be set to seem like the messages from two different persons.
Find the sample code snippet below.
<div class="chatbox" type="textarea" >
<p class="bubble me">Hey you!</p>
<p class="bubble you">Hi. How are you doing?</p>
<p class="bubble me">I'm good. And you? Where have you been?</p>
<p class="bubble you">I'm in Dehradun. Any visit plans?</p>