Pure CSS to achieve all kinds of balloon Bubble dialog box effect (recommended reading)

first, about the pure CSS Implementation Bubble dialog box

First, take a larger picture:

On top of this yellow, big, round, there is a small tail, the text content of some yy pictures, is the use of pure CSS to achieve the Bubble dialog box effect, a little picture is not oh. See here, you are not like me, some marvel at the potential of CSS. On this picture, put aside for the time being, below I want to talk about some of the more important and practical techniques related to the theme.

Let's look at the following picture (from Renren) First:

May be a little light, in the upper left corner of a 90 degree angle, so the entire formation of a bubble dialog box. Now test you, if you come to achieve this effect, what you will do. ZXX: Suppose you've been thinking for a while ｡ ◕‿◕｡ I think if you do not read the title of this article, you may think of a 90-degree isosceles triangle Small picture, even if you know that you can use CSS to achieve the above effect, but you know what is the method. Of course, it's an absolutely compatible approach (from the IE6 that have been in the United States to a grand funeral to many people like Firefox and Safari). Do you have an idea.

OK, let us first look at how Renren is implemented, we use small bug (//zxx: Refers to Firebug, I like the kind called "small bug") to see, the original is also used pictures, 600*6 pixels of the picture, see the following image:

View this picture point this link: http://xnimg.cn/imgpro/box/box_arrow.png

It's a live one. A picture request Ah, and is a separate small picture, the key is on the most visited on the homepage. Where is the difference between good and mediocre? The former pursuit of the ultimate, the latter follow the crowd.

The picture here is completely unnecessary, the use of CSS can achieve almost the same effect, and more than one method, I now know that there are two ways to achieve the above Renren Bubble dialog box effect. I define these two methods as "border law" and "word operator". Second, "character operator" and "Border law "

1. Character operator
The word "operator" is actually mentioned in more detail in my "farewell picture-a beta version of the rounded corner effect using characters for compatibility" in the article.

Here is a brief description of the world, the language of a variety of characters are different, the shape is also strange, so, some characters can be used as a graphic to simulate some of the Web performance effects. For example, the corner of the Renren dialog box above can be achieved by using the prism character (), see the 90-degree sharp angle above the shape, we can let it overflow div display, do not have a sharp angle effect. Positioning can use margin negative or absolute absolute positioning.

This method is applied on my website and you can see something similar to the following in the "Ask and communicate" page of the website:

For specific use, you can click here: "character operator" to implement Bubble dialog box demo
It shows CSS and HTML code.

2. Border Method
As for "border law", that's a long speech. No hurry, slow down.
Let's start by looking at the following style code:

test{width:10px, height:10px, border:10px solid border-color: #ff3300 #0000ff #339966 #00ff00;}

What happens when a div applies the above style. See the following figure (the difference in detail from the Firefox3.5,ie browser):

Carefully observe the border color junction, Four Corners have 4 45° hypotenuse, the entire frame is divided into four isosceles trapezoid.

Now, imagine if we now only keep one of the top borders, the rest of the borders are transparent transparent (or the same color as the background color), then it is not just a red border above, we test, with the above similar code, just modify the remaining three border color.

test{width:10px, height:10px, border:10px solid border-color: #ff3300 #ffffff #ffffff #ffffff;}

The results are shown below (truncated from Firefox3.5):

The results are visible as we expected. Now, think again, if the width and height of the above style are 0, that is width:10px; height:10px; become a width:0; height:0;. Yes, then the display will not be a isosceles trapezoid, but a isosceles right triangle. Do a simple test to know the answer, such as the following code:

test{width:0, height:0, border:10px solid border-color: #ff3300 #ffffff #ffffff #ffffff;}

The results are as follows (still screenshot from Firefox3.5):

At this point, we are surprised to find that the use of the Border property actually produced a isosceles right triangle, and this isosceles right triangle used as the sharp corner of the Bubble dialog box is more appropriate. So, the top of the Renren dialog box can be implemented with border, as long as the bottom border has a color, other transparent (or with the external background of the same color) is good.

For the effect of the "border method" Implementation, you can click here: "Border method" to implement the Bubble dialog box demo, or see the image below.

It's not over yet, let's start our brains again, and imagine what the results would be if the widths of the various borders were inconsistent. Let's revise the test code to make the border width inconsistent, as follows:

. test{width:0; height:0; border-width:20px 10px; Border-style:solid border-color: #ff3300 #ffffff #ffffff #ffffff;}

The resulting results are shown below:

It can be found that the sharp angle is pulled up, that is, the proportion of the adjacent border width will affect the height and low ratio of the individual border shape, it is not difficult to understand.

Now, let's start with our brains, what if we let the next two borders show the color? Test it, the following code:

. test{width:0; height:0; border-width:20px 10px; Border-style:solid border-color: #ff3300 #ff3300 #ffffff #ffffff;}

The result is the following figure:

This is not much to say, we all see, the last adjacent border sharp corner of the implementation of the Bubble dialog box effect bar.
Iii. Advanced application of "border method"

Said to be a high-level application, accurate should be "complex application". That means a combination of two tags (or no tags – using: Before and: After Pseudo Class) to form two different frames to display some of the effects of the implementation.

Look at the following two figures, this module is to achieve the following two kinds of effects:

1. Effect (1)
The CSS code is as follows:

. test{width:300px; padding:30px 20px; margin-left:60px; background: #beceeb; position:relative;}
. Test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
. Test span.bot{
    border-width:20px; 
    Border-style:solid; 
    Border-color: #ffffff #beceeb #beceeb #ffffff; 
    left:-40px; 
    top:40px;
}
. Test span.top{
    border-width:10px 20px; 
    Border-style:dashed solid solid dashed; 
    Border-color:transparent #ffffff #ffffff Transparent; 
    left:-40px; 
    top:60px;
}
                

The HTML code is as follows:

<div class= "Test" >
    <span class= "bot" ></span>
    <span class= "Top" ></span>
    CSS "Border method" to implement the Bubble dialog box effect one
</div>

You can really click here: Effects (1) Demo

2. Effect (2)
The CSS code is as follows:

. test{width:300px; padding:30px 20px; border:5px solid #beceeb; position:relative;}
. Test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
. Test span.bot{
    border-width:20px; 
    Border-style:solid dashed dashed; 
    Border-color: #beceeb transparent transparent; 
    left:80px; 
    bottom:-40px;
}
. Test span.top{
    border-width:20px; 
    Border-style:solid dashed dashed; 
    Border-color: #ffffff transparent transparent; 
    left:80px; 
    bottom:-33px;
}                

The HTML code is as follows:

<div class= "Test" >
    <span class= "bot" ></span>
    <span class= "Top" ></span>
    CSS "Border method" to achieve bubble dialog effect two
</div>

You can really click here: Effects (2) Demo

3. Brief introduction of Effect principle
The key word of the principle is "overlay", the other border formed by the sharp corner of the previous one, as long as the control of the location of the cover, and then formed the actual irregular sharp angle or sharp border. You can also use your creativity to achieve additional results. Iv. Some notes on "Border law"

With regard to "border law", there is some knowledge that must be mentioned.

1. IE6 of odd and even bugs
If you position the outer frame height or the width is odd, then IE6, the low and right positioning of the absolute positioning element will have a 1 pixel error. Therefore, try to ensure that the height or width of the outer frame is even value.

2. IE6 empty div inexplicable height bug
IE6, empty div will have inexplicable height, that is to say height:0, not to do, at this time the sharp angle of the actual accounted for higher than other browsers are different. can use font-size:0; + overflow:hidden; fix the problem.

3. IE6 does not support solid border transparent transparent properties
IE6 does not support the solid border transparent transparent property, when a border is set to the transparent property and has a width, then transparency is displayed in the default black. There are two solutions, one is the need to hide the color set to the background color, so as with the transparency effect, this method has limitations, in the complex "border method" application is not feasible, the second is to use dashed instead of solid, you can achieve IE6 under the border transparent transparent. Why transparency can be achieved. You can refer to this article Dotted&dashed Ultimate analysis and IE6 transparent border, I said humorous, its explanation of the reason seems to say, but, is not so, I am quite skeptical, I have not yet had time to verify that this can be labeled. v. Using CSS3 to implement the Bubble Style dialog box

Everything we said before is fully compatible now with all the mainstream browsers. And here's the method that only supports good browsers for CSS3, such as Firefox3.5+,chrome and Safari. The large yellow-and-yellow figure at the beginning of this article is the rounded, circular, circular tail used by the CSS3.

The core of the effect is the rounded properties of the CSS3: Border-radius, such as the beginning of the big tail of the picture, is the use of the Border-radius realization of the three circle composition, the large circle to form the main content, two smaller circles cover each other, forming a small circular tail, but this is not specific, now, Take an example of a relatively simple point.

The CSS code is as follows:

. test{
    width:300px;
    padding:80px 20px;
    margin-left:100px;
    Background: #beceeb;
    -webkit-border-top-left-radius:220px 120px;
    -webkit-border-top-right-radius:220px 120px;
    -webkit-border-bottom-right-radius:220px 120px;
    -webkit-border-bottom-left-radius:220px 120px;
    -moz-border-radius:220px/120px;
    border-radius:220px/120px;
    position:relative;
}
. Test span{width:0; height:0; font-size:0; background: #beceeb; overflow:hidden; position:absolute;}
. Test span.bot{
    width:30px;
    height:30px;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    left:10px;
    bottom:-20px;
}
. Test span.top{
    width:15px;
    height:15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    left:0px;
    bottom:-40px;
}

The HTML code is as follows:

<div class= "Test" >
    <span class= "bot" ></span>
    <span class= "Top" ></span>
    CSS3 Border-radius Achieve Bubble Dialog effect 
</div>

The final effect is shown below:

You can click here: Effects (3) Demo Six, conclusion

Or that sentence, seniority is limited, mistakes are unavoidable, so if you find that the article is inaccurate or related issues need to communicate can be through the comments or go here to ask the exchange of questions.

Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
This address: http://www.zhangxinxu.com/wordpress/?p=651