Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)

You will see how to make your own background tiles later in this hour, but first a word about how to let the background show through parts of your foreground graphics.

Web page images are always rectangular. However, the astute observer of Figure 9.2 (that's you) will notice that the background tiles show through portions of the title image, and therefore the title picture doesn't look rectangular at all. This works because portions of the image are transparent, which allows the background to show through. You'll often want to use partially transparent images to make graphics look good over any background color or background image tile.

To make part of an image transparent, the image must be saved in the GIF or PNG file format. (JPEG images can't be made transparent.) Most graphics programs that support the GIF format allow you to specify one color to be transparent, whereas PNG images allow for a range of transparency. Largely because of this transparency range, the PNG format is superior to GIF. All the latest web browsers already support PNG images. For more information on the PNG image format, visit http://www.libpng.org/pub/png/pngintro.html.

In the pond sample page in the preceding section, the title image was specified as a GIF with transparency. However, because GIF images allow only a single transparency color, the drop shadow doesn't quite work as desired. You'll quickly realize that GIF images with transparency often look good only with one type of background image or color. In this case, the pond title looked great on a white background but doesn't work so well on a tiled image background.

The solution is to use a PNG image for the tiled background, which can support varying degrees of transparency, as opposed to a single color. Figure 9.4 shows the same web page with a PNG version of the same title image.

Figure 9.4. The PNG version of the pond title image with improved transparency provides the desired drop-shadow effect regardless of the background.

The figure reveals how the drop shadow now allows some of the background image to filter through, which is the intended effect. This difference between GIF and PNG transparency may seem subtle but it can have a huge impact on the visual appeal of your pages.

Coffee Break

To see a practical example of a PNG image with transparency at work, visit the Google Maps online mapping tool at http://maps.google.com/. Zoom in on your hometown and then enter a search for anything you want, such as "pizza." Several markers will appear on the screen that show locations on the map that match your search request. Click one of the markers to open a pop-up that provides additional information. See the really slick shadow made by the pop-up? That's a transparent PNG image! The effect in this case is dramatic because all the underlying map details are allowed to show through the shadow.

Try It Yourself

Follow these steps to save a transparent GIF in Paint Shop Pro:

1.

Choose the eyedropper tool and right-click the color you want to make transparent.

2.

Select ImageImage, Palette, Set Palette Transparency. If the image has more than 256 colors, you will be prompted to reduce the colors to 256just click OK.

3.

You should see the dialog box shown in Figure 9.5. Choose Set the Transparency Value to the Current Background Color, and then click OK.

Figure 9.5. This dialog box appears when you select Image, Palette, Set Palette Transparency. You will usually want the middle option.

4.

Now select Image, Palette, View Palette Transparency, and the transparent parts of the image will turn to a gray checkerboard pattern.

5.

You can use any of the painting tools to touch up parts of the image where there is too little or too much of the transparent background color.

6.

When everything looks right, select File, Save As (or File, Save Copy As) and choose CompuServe Graphics Interchange (*.gif) as the file type.

If you select Colors, View Palette Transparency (or when you click the Proof button shown in Figure 9.5), Paint Shop Pro shows transparent regions of an image with a gray checkerboard pattern. You can change the grid size and colors used under File, Preferences, General Program Preferences, Transparency.

Transparency in PNG images is a slightly more complex issue because it doesn't involve a single transparency color. The trick with PNG images is to make sure that the background itself has no color in it when you create the image. For example, when you first create the image in Paint Shop Pro, be sure to specify the background as being transparent. Then any effects you use that have varying degrees of transparency, like a drop shadow, will automatically take into consideration the transparency of the background.

Related

Категории