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">

<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;
}

.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 previous examples are great, but most of them rely on the addition of nonsemantic markup to your code. These extra elements are needed because you can only add one background image per element. Wouldn't it be great if you could add multiple background images instead? Well, through the magic of CSS 3 you can. What's more, the syntax is extremely simple and takes the same form as regular background images. The main difference is that instead of defining one background image to use, you can use as many images as you like. Here's how it's done:

.box {
  background-image: url(/img/top-left.gif),
                                              url(/img/top-right.gif),
                                              url(/img/bottom-left.gif),
                                              url(/img/bottom-right.gif);
  background-repeat: no-repeat,
                                         no-repeat,
                                         no-repeat,
                                         no-repeat;

background-position: top left,
                                             top right,
                                             bottom left,
                                             bottom right;
}

<div class="box">
   <h2>Headline</h2>
      <p>Content<p>
</div>

You start by defining all the images you want to use with the background-image property. Next, you set whether you want them to repeat on not. Last, you set their positions using the background-position property. You can see the results in Figure 4-12. Safari has supported multiple background images as far back as version 1.3, and the latest versions of Firefox and Opera have now started to catch up. Internet Explorer doesn't yet support multiple background images, but don't let that stop you from using this technique in situations where it doesn't matter if IE users see square corners instead.

Figure 4.12. A rounded corner box made using CSS 3 multiple backgrounds

In these days of high-definition computer games with on-the-fly texture mapping, you would think that browsers would be able to draw a simple rounded corner box themselves, without the need of raster graphics. Well, now they can, thanks to the new CSS 3 border-radius property. All you need to do is set the radius of the desired border and let the browser do the rest (see Figure 4-13).

.box {
  border-radius: 1em;
}

Figure 4.13. A rounded corner box made using the CSS 3 border-radius property

Because this property is new, there is still some disagreement about how it should actually work. So until this property gets wider adoption, you'll need to use browser-specific extensions to invoke it. Currently, both Firefox and Safari support this property, so I'll use the −moz and −webkit prefixes.

.box {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}

Last on my list of new CSS 3 tricks is the border-image property. This excellent addition to CSS allows you to define a single image to act as the border of an element. What good is a single image, you may ask? The beautify of this property is that it allows you to slice up that image into nine separate sectors, based on some simple percentage rules, and the browser will automatically use the correct sector for the corresponding part of the border. Known as nine-slice scaling, this technique helps avoid the distortion you'd normally get when resizing rounded corner boxes. It's a little difficult to visualize, so I think an example is in order.

Imagine you had a 100-pixel high image of a curved box, like the one in Figure 4-14. If you draw two lines 25 percent from the top and bottom of the box, then another two lines 25 percent from the left and the right, you will have divided the box up into nine sectors.

Figure 4.14. The source file for our border image, with the division points draw on for illustration purposes.

The border-image property will automatically use the images in each sector for the corresponding border. So the image in the top-left sector will be used for the top-left border, and the image in the middle-right sector for the right-hand-side border. I want my borders to be 25 pixels wide, so I set that as the width in my CSS. If the images aren't big enough, they will automatically tile, creating an expandable box (see Figure 4-15). Here is how you achieve this effect in code:

.box {
  -webkit-border-image: url(/img/corners.gif)
  25% 25% 25% 25% / 25px round round;
}

Safari has supported this property for a while, through the use of the Webkit-specific extension, as shown in this example. Firefox 3.5 and Opera 9.5 now also support border-image, which opens up its use to a much wider audience.

Figure 4.15. A rounded corner box using the border-image property

While the previous techniques server their purpose, they are all a little cumbersome. Wouldn't it be good if browsers could create their own drop shadows, doing away with the need of Photoshop filters and raster graphics? Well you guessed it, CSS 3 allows us to do this as well, using the handy box-shadow property. This property takes four values: the vertical and horizontal offsets, the width (and hence blurriness) of the shadow, and the color. So in the following example, I am offsetting the shadow by three pixels, making it six pixels wide and medium gray (see Figure 4-19).

img {
  box-shadow: 3px 3px 6px #666;
}

Figure 4.19. A lovely drop shadow using the box-shadow effect

Because this is another one of those experimental CSS 3 properties, you will need to use the Safari and Firefox extensions for now. However, it hopefully won't be long until this property is more widely supported.

img {
  -webkit-box-shadow: 3px 3px 6px #666;
  -moz-box-shadow: 3px 3px 6px #666;
  box-shadow: 3px 3px 6px #666;
}

One of the most exciting things about this property is the fact that it works in conjunction with the border-radius property (see Figure 4-20). This means you can now programmatically create drop shadows on rounded corner boxes without even having to open up your graphics package!

Figure 4.20. A drop shadow on a rounded corner box

We used this effect quite liberally on the UX London 2009 website, serving up drop shadows to modern browsers (see Figure 4-21), and regular boxes to less-capable browsers (see Figure 4-22).

Figure 4.21. The UX London website as seen by Firefox. Notice the solid box shadows created using CSS 3.

Figure 4.22. The UX London website again, this time viewed on Internet Explorer. The design is bereft of shadows, but most users won't notice anything is missing.

CSS opacity has been available in most modern browsers for quite some time, so I'm surprised that it's not used more often. Unsurprisingly, it isn't supported by older version of Internet Explorer. However, a quick bit of IE-specific code will fix that problem. As an example of its use, imagine you wanted to pop up an alert message to your users, layering it over the existing document so they could still see what was underneath (see Figure 4-23).

.alert {
  background-color: #000;
  border-radius: 2em;
  opacity: 0.8;
  filter: alpha(opacity=80); /*proprietary IE code*/
}

Figure 4.23. A rounded corner alert box with 80 percent opacity

The one big problem with CSS opacity is that it's inherited by the contents of the element you're applying it to, as well as the background. So if you look closely at Figure 4-23, you'll see that the text on the page is showing through the alert text as well. This doesn't matter if you're using a very high opacity in combination with high-contrast text. However, with lower opacities, the content of your box can start to get unreadable. This is where RGBa comes in.

RGBa is a mechanism for setting color and opacity in one go. RGB stands for "Red," "Green," and "Blue," while the "a" stands for "alpha transparency." To use RGBa in the previous example, you would do something like this:

.alert {
  background-color: rgba(0,0,0,0.8);
  border-radius: 2em;
}

The first three numbers represent the red, green, and blue values of the color. In this case, the alert box is going to be black, so these are all set to 0. As with opacity, the last number is the decimal value of opacity, so 0.8 means this background will be 80 percent opaque, or to put it another way, 20 percent transparent. A value of 1 would make the alert 100 percent opaque, while a value of 0 would make it fully transparent. The results of this technique are shown in Figure 4-24.

Figure 4.24. A rounded corner alert box with 80 percent opacity using RGBa

One of the biggest benefits of the PNG file format is its support for alpha transparency. This allows you to get really creative with your designs (see Figure 4-25). Unfortunately, Internet Explorer 6 doesn't natively support PNG transparency, although IE 7 and 8 do. However, there are a couple of ways you can get older versions of Internet Explorer to play ball.

Figure 4.25. The old Revyver site had a beautiful example of PNG transparency at the bottom of the viewport. As the page scrolled, you would get glimpses of the content show through the branches of the tree and arcs of the rainbow.

The best-known way of forcing PNG transparency support in IE 6 is to use the proprietary AlphaImageLoader filter. To do this, you need to include the following line of code in your CSS.

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=/img/my-image.png', sizingMethod='crop'),

Unfortunately, using this code will invalidate your CSS, so your best option is to filter this off into a separate IE 6–specific style sheet.

.img-wrapper div {
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
  (src='/img/shadow2.png', sizingMethod='crop'),
  background: none;
}

The first rule uses a proprietary filter to load in the PNG and enforce alpha transparency. The original background image will still be displayed, so the second rule simply hides the original background image.

Internet Explorer has another piece of proprietary code called a conditional comment that will let you serve up a particular stylesheet to specific versions of IE. In this case, you only want IE 6 to see the new stylesheet, so you can place the following code in the head of the page:

<!--[if ie 6]>
<link rel="stylesheet" type="text/css" href="ie6.css"/>
<![endif]-->

The problem with this technique is that it forces you to include this line of code for every alpha-transparent PNG you want to use. As such, it is somewhat cumbersome to use.

The other alternative is to use a technique known as the IE PNG fix. This involves using a little-known, Microsoft-specific extension to CSS called behaviors. By downloading the appropriate .htc file and pointing to it in your IE 6–specific stylesheet, you can enable PNG transparency on any element you want.

img, div {
   behavior: url(iepngfix.htc);
}

For more information on this technique and to download the .htc file, visit www.twinhelix.com/css/iepngfix.

Background images aren't only about creating rounded corner boxes and drop shadows. We can have a lot of fun with them as well. Clearleft did just that when we launched our Silverback usability testing application. If you go to www.silverbackapp.com and resize the browser window, you will notice a strange effect (see Figure 4-26). The background images move at slightly different speeds, giving the impression that the page has depth. This phenomenon is known as parallax scrolling and was the mainstay of many old school computer games.

Figure 4.26. Change the window size on www.silverbackapp.com and see what happens.

To achieve this effect, you first need to create a couple of different background images. We created one image of our vines on a green background and then two further images of vines on an alpha transparent background. This allowed the midground and foreground images to flow over each other and the background, without obscuring the view.

The main background will be applied to the body element. However, assuming we're not using CSS 3 multiple-background images, we'll need to add two new elements to attach our backgrounds to. The content of the page then needs to sit in front of these elements so you can interact with it. You could place the foreground div in front of the content, but this would partially block your content and make it difficult to interact with. So the markup structure will look something like this:

<body>
  <div class="midground">
    <div class="foreground">
      <p>Your content will go here!</a>
    </div>
  </div>
</body>

The first thing you need to do is add the main background to the body element. You want this image to tile horizontally, so you will need to set the image-repeat property to repeat-x. You also want the body element to take on the color of the background, which in this instance is light green. Last, you want to offset your image horizontally by 20 percent, relative to the size of the window. This is where the magic happens. As the window resizes, the position of the background image will change, and it will appear to move across the screen.

body {
  background-image: url(/img/bg-rear.jpg);
  background-repeat: repeat-x;
  background-color:#d3ff99;
  background-position: 20% 0;
}

You now need to do the same with the midground and foreground images, choosing higher percentages so they move faster relative to each other and give that sense of depth. We decided to set the midground's position to 40 percent, and the foreground position to a whopping 150 percent. You can obviously play around with these positions to generate the effect that is right for you.

body {
  background-image: url(/img/bg-rear.jpg);
  background-repeat: repeat-x;
  background-color:#d3ff99;
  background-position: 20% 0;
}


.midground {
  background-image: url(/img/bg-mid.png);
  background-repeat: repeat-x;
  background-color: transparent;
  background-position: 40% 0;
}


.foreground {
  background-image: url(/img/bg-front.png);
  background-repeat: repeat-x;
  background-color: transparent;
  background-position: 150% 0;
}

Figure 4.27. As the window size changes, the background vines appear to move at different speeds, giving a sense of depth.