Pro HTML5 and CSS3 Design Patterns

CHAPTER 14 ■ IMAGES

Shadowed Image cont.

Solution cont. Apply styles to your chosen class or ID as follows:
You can use background-image to load the shadow images into the backgrounds of their
respective elements.
You can use background-position:right bottom; to position the shadow image in the
right-bottom corner of the image.
You can use background-position:right TOP_OFFSET; to position shadow-rt.jpg at an
offset from the right-top corner of the image. You can calculate the value of TOP_OFFSET by
adding BOTTOM_OFFSET to the negative of the height of shadow-rt.jpg. For example, if the
height of shadow-rt.jpg is 100 pixels and BOTTOM_OFFSET is 20 pixels, you would add 20 to -
100 to get a TOP_OFFSET of -80px. By offsetting shadow-rt.jpg by the inverse of its height,
you are aligning its bottom to the top of the background. By adding back in the
BOTTOM_OFFSET, you move it down the same amount that you move down the shadow.
You can use background-position:LEFT_OFFSET bottom; to position shadow-lb.jpg at
an offset from the left-bottom corner of the image. You can calculate the value of
LEFT_OFFSET by adding RIGHT_OFFSET to the negative of the width of shadow-lb.jpg. For
example, if the width of shadow-lb.jpg is 100 pixels and RIGHT_OFFSET is 20 pixels, you
would add 20 to -100 to get a LEFT_OFFSET of -80px. By offsetting shadow-lb.jpg by the
inverse of its width, you are aligning its right side to the left side of the background. By
adding back in the LEFT_OFFSET, you move it to the right by the same amount that you move
the shadow to the right.
You can use background-repeat:no-repeat to prevent each background image from being
tiled.
You can use padding-right:RIGHT_OFFSET to move the shadow image past the right side of
the image.
You can use padding-bottom:BOTTOM_OFFSET to move the shadow image below the bottom
of the image.