CSS Mastery- P3: The human race is a naturally inquisitive species. We just love tinkering with things. When I recently bought a new iMac, I had it to bits within seconds, before I’d even read the instruction manual. We enjoy working things out ourselves and creating our own mental models of how we think things behave. We muddle through and only turn to the manual when something goes wrong or defies our expectations. | USING BACKGROUNDS FOR EFFECT 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 repeat-y .box h2 background url img no-repeat left top padding-top 20px .box .last background url img 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. 77 CHAPTER 4 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 78 USING BACKGROUNDS FOR EFFECT div class box-inner h2 Headline h2 p Content p div div div .
