Pro HTML5 and CSS3 Design Patterns

CHAPTER 14 ■ IMAGES

Shadowed Image cont.

Pattern^

HTML

^

CSS .shrinkwrapped { float:LEFT_OR_RIGHT; }^
.shadowed { background-image:url("FILE.EXT");
background-position:right bottom;
background-repeat:no-repeat; }
.shadowed-rt { background-image:url("FILE-rt.EXT");
background-position:right TOP_OFFSET;
background-repeat:no-repeat; }
.shadowed-lb {
padding-right:RIGHT_OFFSET;
padding-bottom:BOTTOM_OFFSET;
background-image:url("FILE-lb.EXT");
background-position:LEFT_OFFSET bottom;
background-repeat:no-repeat; }

Location This pattern applies to images. Because this pattern wraps the image in block elements, it
cannot be used inline.

Advantages Because the shadow is an image, there is no limit to what you can do with the shadow.
You can use any color, amount of blur, and texture to fit the style of your document.
Because this pattern automatically fits the shadow to the size of the image, you need to
create only three images to put a shadow behind any image of any size. The browser has
to download only three image files to create an unlimited number of shadows.

Disadvantages This pattern requires you to insert extra divisions into the markup to create this shadow
effect.
This pattern requires you to shrinkwrap the parent division to the image. Otherwise, it
will be stretched to the width of its container, and the nested background images will
extend beyond the image to fill the width of the container. This breaks the shadow effect.
In the pattern, I floated the element to shrinkwrap it. You could also position it to
shrinkwrap it. The only block element that shrinkwraps naturally is the table.

Related to Image, Basic Shadowed Image, Rounded-Corners; Padding, Background (Chapter 6);
Float and Clear (Chapter 7)