A case study on the method of CSS3-imitating micro-letter chat Bubbles

We know that there are many chat bubbles on QQ, only a very simple one, this article mainly introduces the CSS3 imitation chat small Bubble instance code, with a certain reference value, interested in small partners can refer to, hope to help everyone.

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.