Pure CSS for speech and speech bubble effect

This article mainly introduces the implementation of the pure CSS speech and speech bubble effect, has a certain reference value, now share to everyone, the need for friends can refer to

Speech bubbles are a very popular effect, and can be seen on many social networking sites by the use of such effects, very attractive for tourists, relying on HTML or JavaScript to achieve a very cumbersome, pure CSS3, no use of images, no JavaScript, It can be applied to your existing HTML

Speech bubbles are a very popular effect and can be seen on many social networking sites using the same effect, which is very appealing to visitors, but I find that many of these effects depend on HTML or JavaScript for a lot of trouble. This tutorial contains various forms of progressive enhanced bubble effects created using CSS 2.1 and CSS3. Pure CSS3, no images, no JavaScript, it can be used in your existing HTML.

Demo: pure CSS Bubbles
Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera + +, ie8+.
progressive enhancement and pseudo-elements
Simple <p>Content</p> or <p>Content</p> code, you can produce the effect of speech bubbles, such as:

Add a child element, such as <blockquote><p>Quote</p></blockquote> you can even produce the effect of a speech bubble, such as:

You can build your own element code based on your own needs and on the basis of existing examples. The key is to use: Before and: After pseudo elements produce basic shapes.
More complex shapes and orientations can be produced by applying CSS3 properties, such as Border-radius properties and transform.

Sample Code
This is an example of how to create a basic voice bubble shape. For further examples, you can view the demo page and the CSS file,

/* Bubble with an isoceles triangle------------------------------------------*/. triangle-isosceles {position: Relative padding:15px; Margin:1em 0 3em; Color: #000; Background: #f3961c; /* CSS3 */-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; Background:-moz-linear-gradient (Top, #f9d835, #f3961c); Background:linear-gradient (Top, #f9d835, #f3961c); }/* Creates triangle */. Triangle-isosceles:after {content: ""; Display:block; /* Reduce the damage in FF3.0 */position:absolute; bottom:-15px; left:50px; width:0; border-width:15px 15px 0; Border-style:solid; Border-color: #f3961c Transparent; }

Step-up Considerations
This method is progressive enhancement. We see the style layer: "Simple colored box, rounded rectangle or gradient background with rounded corners." The style of these browsers, they are able to render.
IE6 and IE7 do not support CSS2.1 pseudo-elements, all: Before and: After declarations will be ignored. They do not have any enhancements, but retain the basic usage habits ...
warnings about Firefox 3.0
Firefox 3.0 supports CSS2.1 pseudo-elements but does not support its positioning.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!