Foundation HTML5 with CSS3

(Steven Felgate) #1

Chapter 5


allowing some of the background to show through the image like a translucent overlay. You can see alpha
transparency in action in Figure 5-4. The checkerboard background shows through the translucent parts of
the image, allowing this logo to blend smoothly and seamlessly with any background, either a solid color or
a pattern, or even overlaying other images.


Figure 5-4. A 24-bit PNG with a transparent alpha channel. The checkerboard background shows through the
translucent parts of the image, with no jagged edge.


Unfortunately, some much older browsers (namely Internet Explorer for Windows, prior to version 7) don’t
fully support PNGs with alpha transparency. If your website needs to support IE 5 or 6, you’ll need to be
careful if and when you use alpha-transparent PNGs.


Yet another variant of the PNG format allows frame-based animation, similar to animated GIFs, but
animated PNG (APNG) images are only supported by a few browsers at this time—others show only a
static image of the first frame.


PNG files use the extension .png, whimsically pronounced “ping.”


A BIT ABOUT BITS


All data in the world of computers consists of ones and zeros, the “digits” that give us the term digital.
Those ones and zeros represent two positions of a switch—1 for on, 0 for off—and form the basis of
binary code, the root language of computers. Each digit is called a bit (short for binary digit), and they’re
collected into groups of 8 bits called a byte. When dealing with larger collections of bytes, they’re
measured in multiples of 1,024 (itself a multiple of 8); 1,024 bytes is a kilobyte, 1,024 kilobytes is a
megabyte, 1,024 megabytes is a gigabyte, and so on. This is how we measure amounts of digital data.

The color value of every pixel in a bitmapped digital image is described with simple ones and zeros. More
colors can be produced as more bits are devoted to describing the color of each pixel. The simplest images
use only a single bit of data per pixel to describe two possible colors—each pixel is either 0 or 1, off or on,
black or white. Because each bit has two possible values, the total number of possible colors is always 2
to the power of the number of bits. As the number of bits per pixel increases, so does the number of
possible colors that can be described. Using 2 bits per pixel provides a total of four possible permutations
Free download pdf