Pro HTML5 and CSS3 Design Patterns

CHAPTER 14 ■ IMAGES

Shadowed Image cont.

HTML

<h1>Shadowed Image</h1>

<div class="shrinkwrapped">

<div class="shadowed">

<div class="shadowed-rt">

<div class="shadowed-lb">

<img src="crater-lake.jpg" alt="Crater Lake" width="518" height="389" />

</div></div></div></div>

CSS

.shrinkwrapped { float:left; }

.shadowed { background-image:url("shadow.jpg");

background-position:right bottom; background-repeat:no-repeat; }

.shadowed-rt { background-image:url("shadow-rt.jpg");

background-position:right -80px; background-repeat:no-repeat; }

.shadowed-lb { padding-right:20px; padding-bottom:20px;

background-image:url("shadow-lb.jpg");

background-position:-80px bottom; background-repeat:no-repeat; }