O'Reilly logo

Professional CSS: Cascading Style Sheets for Web Design, Second Edition by Mark Trammell, Dunstan Orchard, Ethan Marcotte, Cindy Li, Todd Dominey, Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required