CSS Design Web page Tutorial: Make a Web page bubble-like text box

Bubble dialog box in the Web page is often used to explain the features such as hints, you can vividly vivid reality some users need to pay attention to the text and content, this article describes the use of CSS only to achieve this simple web page effect.

Bubble-like text box, is a very vivid web design means.

It can be used to represent a user's speech.

It can also be used as a prompt for specific information.

Netflix, a DVD rental website, also uses it to display details about the disc.

=========================

The traditional way to make a CSS bubble frame requires 5 background images, respectively:

* Tl.gif, rounded corners on the upper left.
* Tr.gif, rounded corners on the upper right.
* Bl.gif, rounded corners on the lower left.
* Br.gif, bottom right corner of the circle.
* Angle.gif, prominent triangle.

Now suppose you have such a piece of code:

<blockquote> before the bed bright Moonlight, doubt is the ground frost. </blockquote> <p> Li Bai </p>

We hope that through the bubble frame, to produce a visual effect, Li Bai and verse corresponding.

First, then, you need to add four "hooks" to the verse (handler):

<div class= "TL" > <div class= "TR" > <div class= "BR" > <div class= "BL" > <blockquote> before the bed bright Moonlight, doubt is the ground frost. </blockquote> </div> </div> </div> </div>

Then, specify the height and width for the outermost container div.tl, so that it forms a visual box:

. tl{ width:300px; height:50px; Text-align:center; line-height:50px; }

Next, add four different rounded backgrounds for the four hooks:

. Tl{background:url ("Tl.gif") top left no-repeat #ff8c45;} . Tr{background:url ("Tr.gif") Top right No-repeat . Bl{background:url ("Bl.gif") bottom left no-repeat; . Br{background:url ("br.gif") bottom right no-repeat;}

Finally, the "Li Bai" before the triangle picture.

p{ padding:15px 0px 0px 50px; Background:url ("Angle.gif") 40px top no-repeat; }

The Bubble box is generated.

The advantage of this approach is that all browsers support, the disadvantage is more cumbersome, you must create a special picture, add extra tags, code less flexible.

============================

With the advent of CSS3, there is now a better way to generate beautiful text boxes without any background images or extra tags.

See the new method invented by Nicolas Gallagher , an example:

Because this method uses CSS3, IE6 is not supported, IE7 and IE8 cannot display rounded corners. The latest version of other browsers can be displayed correctly.

Or take the previous code as an example.

<blockquote class= "bubble" > Bed before Ming Moonlight, doubt is on the ground frost. </blockquote>

The first step is to generate the basic boxes.

. bubble{ position:relative; padding:15px; Margin:1em 0em 3em; width:300px; line-height:1.2; Text-align:center; Color: #fff; Background: #075698; }

The second step is to generate rounded corners.

. bubble{ -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }

The third step is to make a linear gradient effect.

. bubble{ Background:-webkit-gradient (linear, left top, left bottom, from (#f9d835), to (#f3961c)); Background:-moz-linear-gradient (Top, #f9d835, #f3961c); Background:-o-linear-gradient (Top, #f9d835, #f3961c); Background:linear-gradient (Top, #f9d835, #f3961c); }

Step fourth, add an empty element behind the container and set the length and width to 0.

. bubble:after { Content: "\00A0"; width:0; height:0; }

Step fifth, specify that this empty element is a block-level element, and that only the top border, and the other three borders, are set to transparent in four borders. Because the size of the element is 0, each of its borders is a isosceles.

. bubble:after{ Display:block; Border-style:solid; border-width:15px; Border-color: #f3961c transparent transparent transparent; }

At this point, you can already see the triangle (actually a top border).

The sixth step is to specify that the null element be positioned as absolute. Then, with the bottom left corner of the container element, move the empty element horizontally to the right a certain distance (here is 50 pixels), and then move the distance vertically down two boundaries. (Since step fifth sets the boundary of the empty element to 15 pixels, this is the move down by 30 pixels.) ）

. bubble:after{ Position:absolute; Z-index:-1; bottom:-30px; left:50px; }

At this point, a bubble box that doesn't require any background pictures or extra labels appears in front of us.

The flexibility to handle the borders of empty elements, or to resize them, or to generate rounded corners, or to overlap the borders of two of empty elements, produces a variety of changes. For specific effects and code, please refer to the example page of Nicolas Gallagher .