CSS Cookbook, 3rd Edition

Chapter 4. Images

Introduction

When Marc Andreessen’s first browser allowed for the inline display of images back in the early 1990s, it helped to kick-start a visually engaging aspect of surfing the Web. Shared documents no longer were just text-laden academic papers, allowing designers the initial foothold to begin the field of web design.

Since those early days, designers have been using GIFs, JPEGs, and PNGs to enhance websites beyond the placement of one or two images on a web page.

In this chapter, we’ll discuss many recipes regarding CSS interactions with images. Recipes include dealing with borders, manipulating background images, rounding corners on boxes, replacing HTML text with images, and much more.

Transforming Color Images to Black and White in IE with CSS

Problem

You want to convert color images in a web page to grayscale versions in Internet Explorer.

Solution

Use the proprietary filter CSS property to automatically convert images to grayscale:

img {
 filter: gray;
}

Note

In IE8, Microsoft is transitioning filter and other properties to use CSS vendor extensions. For more information, see http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx.

Discussion

Although not the most useful CSS property, filter does have its uses.

One example is to set images to gray for print stylesheets (see Chapter 11). This approach saves your user money, as color inks are more expensive than black ink.

Another example is to craft custom stylesheets for older versions of Internet ...