Professional CSS: Cascading Style Sheets for Web Design, Second Edition

Chapter 8. Professional CSS Book Site: Using Transparent PNGs

	What passes for woman's intuition is often nothing more than man's transparency.
	--George Jean Nathan

In this chapter you learn how to use Transparent PNGs while designing a Web site. As a practical example, the sample that will be used will be the home page of www.procssbook.com, shown in Figure 8-1. The page was designed with the use of Transparent PNGs.

Before learning how to use Transparent PNGs, it's important to discuss why Transparent PNGs can be useful when laying out a design for a Web site.

Like GIFs and JPEGs, PNG images are ideal for Web use. Like GIFs, the PNG is great for displaying small images with few colors, such as logos and icons. Also, PNGs sport a few advantages over GIF images. Most notably, they support alpha-transparency. What is alpha-transparency? GIF files are only capable of displaying a pixel as either completely transparent or completely opaque: this is known as binary transparency. When an image contains alpha layers, however, parts of an image can be partially transparent. You can specify a level of transparency from 0 to 255. Figure 8-2 shows a comparison of images with layers of varying transparency.

When working with most images and graphic files, you will find that a PNG is able to achieve greater compression than a GIF. PNGs provide for a much greater range of transparency options than GIFs. Alpha-channel transparency is the number one option available. A PNG can also provide for a ...