What's App Text Bubbles in CSS
HTML
<div class="speech-wrapper">
<div class="bubble">
<div class="txt">
<p class="name">Cesar Nogueira</p>
<p class="message">Hey, check out this pure CSS speech bubble...</p>
<span class="timestamp">10:20 pm</span>
</div>
<div class="bubble-arrow"></div>
</div>
<div class="bubble alt">
<div class="txt">
<p class="name alt">+353 87 1234 567<span> ~ Anna</span></p>
<p class="message"><i>Nice...</i> this will work great for my new project.</p>
<span class="timestamp">10:22 pm</span>
</div>
<div class="bubble-arrow alt"></div>
</div>
</div>
<div class="speech-wrapper">
<div class="bubble">
<div class="txt">
<p class="name">Cesar Nogueira</p>
<p class="message">Don't forget to visit my website! </p>
<span class="timestamp">10:20 pm</span>
</div>
<div class="bubble-arrow"></div>
</div>
<div class="bubble alt">
<div class="txt">
<p class="name alt">+353 87 1234 567<span> ~ Anna </span></p>
<p class="message">Which website?</p>
<span class="timestamp">10:22 pm</span>
</div>
<div class="bubble-arrow alt"></div>
</div>
<div class="speech-divider"></div>
<div class="bubble">
<div class="txt">
<p class="name">+55 19 993828181 <span> ~ Cesar</span><span></span></p>
<p class="message"><a href="http://cesarnogueira.me" target="_blank">www.cesarnogueira.me</a></p>
<span class="timestamp">10:30 pm</span>
</div>
<div class="bubble-arrow"></div>
</div>
<div class="bubble alt">
<div class="txt">
<p class="name alt">+353 87 1234 567<span> ~ Anna </span></p>
<p class="message"><b>Awesome!</b> I will certainly visit your website!</p>
<span class="timestamp">23:59 pm</span>
</div>
<div class="bubble-arrow alt"></div>
</div>
</div>
SCSS
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: url('http://forums.crackberry.com/attachments/blackberry-10-wallpapers-f308/137432d1361639896t-z10-wallpaper-set-z10-music.jpg');
}
.speech-divider {
padding: 5px 5px;
}
.speech-wrapper {
padding: 30px 40px;
.bubble {
width: 240px;
height: auto;
display: block;
background: #f5f5f5;
border-radius: 4px;
box-shadow: 2px 8px 5px #000;
position: relative;
margin: 0 0 25px;
&.alt {
margin: 0 0 0 60px;
}
.txt {
padding: 8px 55px 8px 14px;
.name {
font-weight: 600;
font-size: 12px;
margin: 0 0 4px;
color: #3498db;
span {
font-weight: normal;
color: #b3b3b3;
}
&.alt {
color: #2ecc71;
}
}
.message {
font-size: 12px;
margin: 0;
color: #2b2b2b;
}
.timestamp {
font-size: 11px;
position: absolute;
bottom: 8px;
right: 10px;
text-transform: uppercase;
color: #999;
}
}
.bubble-arrow {
position: absolute;
width: 0;
bottom: 42px;
left: -16px;
height: 0;
&.alt {
right: -2px;
bottom: 40px;
left: auto;
}
}
.bubble-arrow:after {
content: '';
position: absolute;
border: 0 solid transparent;
border-top: 9px solid #f5f5f5;
border-radius: 0 20px 0;
width: 15px;
height: 30px;
transform: rotate(145deg);
}
.bubble-arrow.alt:after {
transform: rotate(45deg) scaleY(-1);
}
}
}
