CSS3 imitation WeChat chat small Bubble code example

This article mainly introduces the CSS3 imitation chat small Bubble instance code, has certain reference value, the interested small partners may refer to

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:

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

First part: HTML

<p class= "LEFTD" > <span ng-class= "Leftd_h" >  </span> <p class=" speech left "ng-class=" speech left "> Two goods, you see you honestly! </p></p><p class= "RIGHTD" > <span ng-class= "Rightd_h" >  <p class= "speech right" ng-class= "speech left" > Hee hee ... </p></p><p class= "LEFTD" > <span ng-class= "Leftd_h" >     ;    </span> <p class= "speech" ng-class= "speech left" > laugh, did not see this baby today become beautiful? </p></p><p class= "RIGHTD" > <span ng-class= "Rightd_h" >  <p class= "speech right" ng-class= "speech Left" > No, you're beautiful every day! </p></p> 

Part II: CSS3

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

/* Bubble */p.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;}    P.speech:before {content: ';    Position:absolute;    width:0;    height:0;    left:15px;    Top: -20px;    border:10px solid; Border-color:transparent transparent #989898 transparent;} P.speech:after {content: '; position:absolute; width:0; height:0; left:17px; top: -16px; border:8px solid; border-c Olor:transparent transparent #ffffff transparent;} p.speech.right {display:inline-block; Box-shadow: -2px 2px 5px #CCC; margin-right:10px; max-width:75%; float:right; b  Ackground:-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));} P.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;} P.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;} P. left {display:inline-block; box-shadow:2px 2px 2px #CCCCCC; margin-left:10px; max-width:75%; position:relative; b  Ackground:-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));} P. 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;} P. left:after {content: '; position:absolute; width:0; height:0; top:10px; bottom:auto; left: -8px; border-width:8 PX 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.