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); } } }
JAVASCRIPT
Expand for more options Login