Drop Shadows

Abstract

Drop shadows can turn pictures and text blocks into eye-catching illustrations that seem to hover above the surface of the page. The CSS3 recommendations include a new drop shadow facility and this is described first in this chapter. Internet Explorer 7 and 8 do not support CSS3; therefore the rest of the chapter gives instructions for CSS2 workarounds that will enable IE 7 and IE 8 users to see the shadows. Drop shadows for images and text boxes can be achieved by the following three methods:

• Use the new CSS3 drop shadow (this does not work in IE 7 or IE 8).

• Use a graphics package for drop shadows applied directly to the image or text. This chapter gives instructions for producing drop shadows quickly and easily using the free and open source program GIMP (previously known as The Gimp in versions prior to 2.6).

• Use CSS2 and a. png background image of a shadow that extends or contracts to match the size of the picture (this is Big John’s method; more on this later in the chapter). The shadows can be viewed in all browsers including IE 8. This method will create two- or four-sided shadows by using a shadow background image (or images). The chapter gives instructions for creating the shadow images in the free GIMP graphics program.