Implement various types of balloon bubble dialog box effects with pure CSS

ArticleDirectory

• 1. dialog box about pure CSS bubble implementation
• 2. "character method" and "border method"
• Iii. Advanced applications of border Method
• Iv. Description of the border Method
• 5. Use css3 to implement a bubble Style dialog box
• Vi. Conclusion

From http://www.zhangxinxu.com by zhangxinxu
Address: http://www.zhangxinxu.com/wordpress? P = 651

1. dialog box about pure CSS bubble implementation

First, let's take a big picture:

This yellow, big, round, with a small tail on the top. Some YY pictures of the text are the bubble dialog box effects achieved by pure CSS. Here, you are not just like me, but are amazed at the potential of CSS. For this image, I will put it aside for the time being. Next I will talk about some important and practical technologies related to the subject.

First, let's take a look at the following picture (captured from Renren ):

The color may be a little light, and there is a 90 degree angle in the upper left corner, so a bubble dialog box is formed. Now, how can you test this effect? // Zxx: Suppose you have been thinking about it for a while. I think, if you haven't read the title of this article, you may think of a 90-degree round triangle image; even if you know you can use CSS to implement the above effect, do you know what the method is? Of course, it is an absolutely compatible method (from IE6, which has already held a grand funeral in the United States, to Firefox and Safari, which many people like ). Do you have an idea?

Well, let's first take a look at how Renren implemented the network. Let's take a look at it with a small bug (// zxx: Refers to firebug, which I like to call "little bug, the original image is also used. For details about the 600*6 pixel image, see:

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

This is a living image request, and it is an independent small image. The key is on the homepage with an astonishing traffic. What is the difference between excellence and mediocrity? The former pursues perfection, while the latter follows the trend.

There is no need for the image here. CSS can achieve almost the same effect, and there are more than one method. I currently know two ways to achieve the above bubble dialog box effect for Renren. I define these two methods as "border" and "character ".

Address: http://www.zhangxinxu.com/wordpress? P = 651

2. "character method" and "border method"

1. Character Method
For the "character method", I have mentioned it in detail in my article "Farewell to the image-use character to achieve compatibility of rounded corner tip effect beta.

Here we will give a brief introduction to the diversity of languages in the world, as well as the varied types of characters and shapes. Therefore, some characters can be used as images, to simulate some Web performance. For example, the tip of the Renren dialog box above can be implemented using the prism character (◆). Can we see the 90-degree tip above this shape, so we can let it overflow Div display, don't you have the best effect! You can use a negative value of margin or absolute location of absolute for positioning.

This method is applied on my website. You can view similar content on the "questions and exchanges" page of the website:

For specific usage, you can click here: "character method" to implement the demo of the bubble dialog box
CSS and HTMLCode.

2. Border
It takes a long time to talk about the border method. Don't worry, take it easy.
Let's take a look at the following style code:

. Test {width: 10px; Height: 10px; Border: 10px solid; border-color: # ff3300 # 0000ff #339966 #00ff00 ;}
 

What will happen when a div applies the above style? See (the difference in details between the IE browser and the firefox3.5 browser ):

Observe the border color at the junction. The four corners have four 45 ° oblique edges, and the entire border is divided into four isosceles trapezoid.

Now, imagine that if we only keep one top border and the remaining borders are transparent (or the same color as the background color), then it will show only one top red border, we tested the code similar to the above, but only changed the color of the remaining three borders.

 
. Test {width: 10px; Height: 10px; Border: 10px solid; border-color: # ff3300 # ffffff ;}
 

The result is as follows (captured from firefox3.5 ):

The result is displayed as expected. Now, start thinking again. Imagine if the width and height of the style above are both 0, that isWidth: 10px; Height: 10px;ChangedWidth: 0; Height: 0;. By the way, the display will not be an isosceles trapezoid, but an isosceles right triangle. A simple test will show you the answer, as shown in the following code:

 
. Test {width: 0; Height: 0; Border: 10px solid; border-color: # ff3300 # ffffff ;}
 

The result is as follows (still from firefox3.5 ):

At this point, we are surprised to find that the border attribute actually produces an equi-waist right triangle, and this equi-waist right triangle is used as the tip of the bubble dialog box. Therefore, the tip of the above Renren dialog box can be implemented using border, as long as the lower border has a color, other transparent (or the same color as the external background.

For more information about the effect of the border method, click here: "border method" to implement the demo of the bubble dialog box, or see.

Before we finish, let's start our intelligent brain. Imagine what would happen if the Border width is different? Modify the test code to make the Border Width inconsistent, as shown below:

 
. Test {width: 0; Height: 0; border-width: 20px 10px; border-style: solid; border-color: # ff3300 # ffffff ;}
 

The result is as follows:

It can be found that the sharp angle is increased, that is, the ratio of the adjacent border width will affect the ratio of the height to the lower of a single border shape, which is not hard to understand.

Now, let's start our brains. What if we show the color of the adjacent two borders? Test the Code as follows:

 
. Test {width: 0; Height: 0; border-width: 20px 10px; border-style: solid; border-color: # ff3300 # ff3300 # ffffff ;}
 

The result is as follows:

This is not much to say. Everyone can see the effect of the bubble dialog box implemented by the tip of the last adjacent border.

Address: http://www.zhangxinxu.com/wordpress? P = 651

Iii. Advanced applications of border Method

It is an advanced application, but it should be a complex application ". That is to say, two different borders formed by two tags (or no-label-Use: before and: After pseudo-class) are combined to display some of the effects.

Taking a look at the two figures below, this unit is to achieve the following two 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 # ffffff;
Left:-40px;
Top: 40px;
}
. Test span. Top {
Border-width: 10px 20px;
Border-style: dashed SOLID dashed;
Border-color: transparent # 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 Bubble dialog box effect 1
</Div>
 

You can click here: Effect (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;
Border-color: # beceeb transparent;
Left: 80px;
Bottom:-40px;
}
. Test span. Top {
Border-width: 20px;
Border-style: solid dashed;
Border-color: # ffffff 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 implement bubble dialog box effect 2
</Div>
 

You can click here: Effect (2) demo

3. Brief description of the effect principle
The keyword of the principle is "Overwrite", and the tip angle formed by the other border overwrites the previous one, as long as the coverage location is well controlled, then the actual irregular tip angle or the tip border is formed. You can also use your creativity to achieve more results.

Address: http://www.zhangxinxu.com/wordpress? P = 651

Iv. Description of the border Method

You have some knowledge about the border method.

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

2. IE6 empty Div inexplicable height bug
In IE6, the empty Div has an inexplicable height, that is, height: 0; not used. In this case, the actual proportion of the sharp angle is higher than that of other browsers. You can use font-size: 0; + overflow: hidden; to fix this problem.

3. IE6 does not support the transparent attribute of the solid border.
IE6 does not support the transparent attribute of the solid border. When a border is set to the transparent attribute and has a width, the transparency will be displayed in black by default. There are two solution methods. One is to set the color to be hidden as the background color. In this way, the transparency effect is the same. This method has limitations and won't work in the complex border method; the second is that you can use dashed instead of solid to implement transparent transparency under IE6. Why is it transparent? You can refer to the mochen Article dotted & dashed ultimate analysis and the IE6 transparent border. I am going to talk about some things, and its explanation of the reason seems to be okay, but is it true, I am very skeptical. I have not had time to verify it. You can mark it.

Address: http://www.zhangxinxu.com/wordpress? P = 651

5. Use css3 to implement a bubble Style dialog box

Everything we said before is fully compatible with all mainstream browsers. The method here only supports browsers with good support for css3, such as firefox3.5 +, chrome, and safari. The yellow big image at the beginning of this article is the circular and arc-like corner tail implemented by css3.

The core of the effect is the rounded corner attribute of css3: border-radius. For example, the starting big tail image is composed of three circles implemented by border-radius. The big circle forms the main body content, the two smaller circles cover each other to form a small tail of an arc, but this is not specific. Now, we use a relatively simple example.

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 Implement Bubble dialog box Effect
</Div>
 

The final effect is as follows:

You can click here: Effect (3) demo

Vi. Conclusion

In other words, the qualifications are limited, and errors are inevitable. Therefore, if you find that the expression in the article is inaccurate or you need to communicate with others, you can comment on it or go here to ask questions.

Original article, reproduced please indicate from Zhang xinxu-xin space-xin Sheng live [http://www.zhangxinxu.com]
Address: http://www.zhangxinxu.com/wordpress? P = 651

(This article is complete)