Pure css to realize chat bubbles

Chat bubbles as a form of UI expression is popular with the masses of netizens, but many tutorials implement it but always need to use the semantics of HTML or JavaScript.

Chat bubbles as a form of UI expression is popular with the masses of netizens, but many tutorials implement it but always need to use the semantics of HTML or JavaScript. The various chat bubbles in this tutorial only need to be built using CSS2.1 and CSS3 to enhance the effect. Don't use pictures, don't use JavaScript, or HTML that doesn't use the current semantics anymore.
There are a lot of comments about the code in the CSS file, so you can easily read the code. (Translator: In translation, the author asked the demo page to use the original URL, so these comments do not translate, of course, when you read this article, understand the realization of the way, which do not look at the comments can also be read code. ）

View Demo: pure CSS Chat bubbles

Pure CSS Chat bubble
Just simple HTML code: <div>Content</div> or <p>Content</p> You can make the following chat bubble effect: If you add a child element, such as < Blockquote>quote</blockquote> can again make such a chat bubble effect: I suggest you use pseudo class: Before and/or: After To create a DOM that is not written in an HTML document and use CSS to control their performance. (Translator: Here is the most critical word in this article, pseudo-class in non-IE browser can create a DOM element in HTML, and can be controlled with CSS oh, why? Why does the pseudo class form a DOM element, perhaps the browser is created to achieve the effect of the pseudo class? It was found and used by the authors. ）
The Border-radius and transform in CSS3 can be used to perform more complex graphics, more details please see "CSS Typography Experiment" (translator: This article does not translate)
Sample code
The following code is primarily about creating a demo that has several of the most basic incremental-enhanced chat bubbles. More demo please see the pure CSS chat bubble and in the relevant CSS file use.

* * Bubble and small triangle
------------------------------------------ */

. triangle-isosceles {
position:relative;
padding:15px;
Margin:1em 0 3em;
Color: #000;
Background: #f3961c;

/* Here is the use of CSS3 to control the fillet and gradient effect * *
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
Background:-moz-linear-gradient (Top, #f9d835, #f3961c);
Background:linear-gradient (Top, #f9d835, #f3961c);
}

/* Create triangle (translator: Please note here, this is the control of the pseudo class created by the DOM element) * *
. triangle-isosceles:after {
Content: "0A0";
Display:block; /* for FF3.0 * *
Position:absolute;
Z-index:-1;
bottom:-30px;
left:50px;
width:0;
height:0;
border-width:15px 15px;
Border-style:solid;
Border-color: #f3961c Transparent transparent;
}

Some notes:
This method is a progressive enhancement process. The first is to create a simple layer, and then the pseudo class to achieve the bubble "small triangle", and then use CSS3 to achieve rounded corners and gradient background. Layer, pseudo class, fillet, gradient background These four features will have different experiences depending on the rendering capabilities of the browser.
Therefore, browsers that do not fully support CSS2.1 (such as IE6 and IE7) or unsupported CSS3 (such as IE8) will not be able to give the user experience the best results.

Tips on Firefox3.0:
FF3.0 supports the DOM generated by the CSS2.1 pseudo class, but does not support positioning of the generated elements. Some examples in demo I think are not acceptable in FF3.0, that is, FF3.0 can not handle the most basic chat bubbles. According to the Netapplications Company's March 2010 statistics, FF3.0 Browser currently has about 2%〜4% market share. So before applying this technique, you should consider the importance of FF3.0 in your audience. Eventually, however, it will become a rare browser. However, there is no better support for the FF3.0 technology in this article.