Home Home Facebook Style Chat Bubbles using CSS

Facebook Style Chat Bubbles using CSS

facebook-chat-popup

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

Capture

Here is the CSS code for chat bubbles

            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;
            }

            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

<span class="left">message</span>
<div class="clear"></div>
<span class="right">message</span>
<div class="clear"></div>
<span class="left">message</span>
<div class="clear"></div>
<span class="right">message</span>

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.

Capture

Complete Source Code

I have created a facebook style chat box and place bubbles in it. Here is the complete source code

View Demo

<!doctype html>
<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>
Narayan Prusty
Playing Videos in Intel XDK APPFind Admin Menu Item's Page URL in WordPress
Comments: 2
  1. 7 months ago

    Great work..

    ReplyCancel
  2. Evans
    3 years ago

    Good but,when i press enter key it does not post,please help

    ReplyCancel

Leave a Reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image3 years ago 2 Comments Web Development
Share this
Related Articles