Examples of small bubbles using CSS3-like WeChat chat

Today to share a project I just did a small case, because we are doing a chat function, the previous Chat page UI is ugly, I am not here to show you.

Now teach you how to use CSS3 to make a page with the same chat interface.

Let's start by showing you what the page looks like, as shown in:

Xiao Yue Blog Imitation Chat interface

The page is roughly what it looks like, so let's learn how to make the steps together.

First part: HTML

<div class= "LEFTD" > <span ng-class= "Leftd_h" >  </span> <div class=" speech left "ng-class=" speech left "> Two goods, you see you honestly! </div></div><div class= "RIGHTD" > <span ng-class= "Rightd_h" >  </span> <div class=" speech right "ng-class=" speech left "> Hee hee ... </div></div><div class= "LEFTD" > <span ng-class= "Leftd_h" >  </span> <div class=" speech left "ng-class=" speech "> Laugh what smile, did not see this baby has become beautiful today? </div></div><div class= "RIGHTD" > <span ng-class= "Rightd_h" >  </span> <div class=" speech right "ng-class=" speech "> No, no, you're beautiful every day! </div></div> 

Part II: CSS3

PS (This is the most important part of it, I will put all the code to show it!) ）

/* Bubble */div.speech {float:left;    margin:10px 0;    padding:8px;    table-layout:fixed;    Word-break:break-all;    position:relative; Background:-webkit-gradient (linear, 50% 0, 50% 100%, from (#ffffff), Color-stop (0.1, #ececec), Color-stop (0.5, #dbdbdb)    , Color-stop (0.9, #dcdcdc), to (#8c8c8c));    border:1px solid #989898; border-radius:8px;}    Div.speech:before {content: ';    Position:absolute;    width:0;    height:0;    left:15px;    Top: -20px;    border:10px solid; Border-color:transparent transparent #989898 transparent;} Div.speech:after {content: '; position:absolute; width:0; height:0; left:17px; top: -16px; border:8px solid; border -color:transparent transparent #ffffff transparent;}  div.speech.right {display:inline-block; Box-shadow: -2px 2px 5px #CCC; margin-right:10px; max-width:75%; float:right; Background:-webkit-gradient (linear, 50% 0, 50% 100%, from (#e4ffa7), Color-stop (0.1, #bced50), Color-stop (0.4, #aed943) , Color-stop (0.8, #a7d143), to (#99BF40));}  Div.speech.right:before {content: '; position:absolute; width:0; height:0; top:9px; bottom:auto; left:auto; Right: -10px; border-width:9px 0 9px 10px; Border-color:transparent #989898;}  Div.speech.right:after {content: '; position:absolute; width:0; height:0; top:10px; bottom:auto; left:auto; Right: -8px; border-width:8px 0 8px 9px; Border-color:transparent #bced50;}  Div. left {display:inline-block; box-shadow:2px 2px 2px #CCCCCC; margin-left:10px; max-width:75%; position:relative; Background:-webkit-gradient (linear, 50% 0, 50% 100%, from (#ffffff), Color-stop (0.1, #eae8e8), Color-stop (0.4, #E3E3E3) , Color-stop (0.8, #DFDFDF), to (#D9D9D9));} Div. left:before {content: '; position:absolute; width:0; height:0; top:9px; bottom:auto; left: -10px; border-width : 9px 10px 9px 0; Border-color:transparent #989898;} Div. left:after {content: '; position:absolute; width:0; height:0; top:10px; bottom:auto; left: -8px; border-width: 8px 9px 8px 0; Border-color:transparent #eae8e8;}. leftimg {float:left; margin-top:10px;}. rightimg {float:right; margin-top:10px;}. LEFTD {clear:both; float:left; margin-left:10px;}. RIGHTD {clear:both; float:right; margin-right:10px;}. leftd_h{width:39px; height:39px; border-radius:100%; display:block; float:left; overflow:hidden;}. Leftd_h img{display:block; width:100%; height:auto;}. rightd_h{width:39px; height:39px; border-radius:100%; display:block; float:right; overflow:hidden;}. Rightd_h img{display:block; width:100%; height:auto;}

Here is basically the use of CSS pseudo-class elements, to make small bubbles. There are many cases on the Internet is the user chat avatar as a background map, but I feel this in the actual project, not very suitable, so I made some changes, but we are more practical.