Tài liệu CSS Mastery- P3 doc

USING BACKGROUNDS FOR EFFECT

77

Figure 4-5. Example of a stylized rounded-corner box

You can actually use the same approach, but this time, instead of setting a background color on

the box, you can set a repeating background image. For this to work, you will need to apply the

bottom curve image to another element. In this case, I used the last paragraph element in the

box:

.box {

width: 424px;

background: url(/img/tile2.gif) repeat-y;

}

.box h2 {

background: url(/img/top2.gif) no-repeat left top;

padding-top: 20px;

}

.box .last {

background: url(/img/bottom2.gif) no-repeat left bottom;

padding-bottom: 20px;

}

.box h2, .box p {

padding-left: 20px;

padding-right: 20px;

}

<div class="box">

<h2>Headline</h2>

<p class="last">Content</p>

</div>

Figure 4-6 shows the resulting styled box. Because no height has been given to the box, it will

expand vertically as the text size is increased.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

CHAPTER 4

78

Figure 4-6. Styled fixed-width box. The height of the box expands as the text size is increased.

Flexible rounded-corner box

The previous examples will all expand vertically if you increase your text size. However, they do

not expand horizontally, as the width of the box has to be the same as the width of the top and

bottom images. If you want to create a flexible box, you will need to take a slightly different

approach. Instead of the top and bottom curves consisting of a single image, they need to be

made up of two overlapping images (see Figure 4-7).

Figure 4-7. Diagram showing how the top graphics expand to form a flexible rounded-corner box

As the box increases in size, more of the larger image will be revealed, thus creating the illusion

that the box is expanding. This concept is sometimes referred as the sliding doors technique

because one image slides over the other, hiding it from view. More images are required for this

method to work, so you will have to add a couple of extra, nonsemantic elements to your markup.

<div class="box">

<div class="box-outer">

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

USING BACKGROUNDS FOR EFFECT

79

<div class="box-inner">

<h2>Headline</h2>

<p>Content</p>

</div>

</div>

</div>

This method requires four images: the top two images make up the top curve, and the bottom two

images make up the bottom curve and the body of the box (see Figure 4-8). As such, the bottom

images need to be as tall as the maximum height of the box. We will name these images top￾left.gif, top-right.gif, bottom-left.gif, and bottom-right.gif.

Figure 4-8. The images required to create the flexible rounded-corner box

First, you apply the bottom-left.gif to the main box div and bottom-right.gif to the outer div.

Next you apply top-left.gif to the inner div and finally top-right.gif to the heading. Last, it is

a good idea to add some padding to space out the contents of the box a little.

.box {

width: 20em;

background: #effce7 url(/img/bottom-left.gif) no-repeat left bottom;

}

.box-outer {

background: url(/img/bottom-right.gif) no-repeat right bottom;

padding-bottom: 1em;

}

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

CHAPTER 4

80

.box-inner {

background: url(/img/top-left.gif) no-repeat left top;

}

.box h2 {

background: url(/img/top-right.gif) no-repeat right top;

padding-top: 1em;

}

.box h2, .box p {

padding-left: 1em;

padding-right: 1em;

}

In this example, I have set the width of the box in ems, so increasing the text size in your browser

will cause the box to stretch (see Figure 4-9). You could, of course, set the width in percentages

and have the box expand or contract depending on the size of the browser window. This is one of

the main principles behind elastic and liquid layouts, something I will be covering later in the

book.

Figure 4-9. Flexible rounded-corner boxes expand both horizontally and vertically as the text is

resized.

The addition of a couple of extra nonsemantic elements is not ideal. If you only

have a couple of boxes, it is probably something you can live with. But if you

are concerned you could always add the extra elements using JavaScript (and

the DOM) instead. For more details on this topic, see the excellent article by

Roger Johansson of 456 Berea Street at www.456bereastreet.com/archive/

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

USING BACKGROUNDS FOR EFFECT

81

200505/transparent_custom_corners_and_borders.

Mountaintop corners

Mountaintop corners are a simple yet very flexible concept, first coined by Dan Cederholm of

www.simplebits.com, author of the best-selling friends of ED book Web Standards Solutions

(friends of ED, 2004 and updated 2009). Suppose you want to create a variety of different-colored

rounded-corner boxes. Using the previous methods you would have to create different corner

graphics for each color theme. This may be okay if you only had a couple of themes, but say you

wanted to let your users create their own themes? You’d probably have to create the corner

graphics dynamically on the server, which could get very complicated.

Fortunately, there is another way. Instead of creating colored corner graphics, you can create

curved, bitmap corner masks (see Figure 4-10). The masked area maps to the background color

you are using while the actual corner area is transparent. When placed over a colored box, they

give the impression that the box is curved (see Figure 4-11).

Figure 4-10. In a bitmapped corner mask, the white mask will cover the background color,

creating a simple curved effect.

As these corner masks need to be bitmapped, subtle curves work best. If you try to use a large

curve, it will appear jagged and unsightly.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.