Pro HTML5 and CSS3 Design Patterns

CHAPTER 14 ■ IMAGES

Fade-Out

HTML

<h1>Fade-Out</h1>

<h2 class="g1">g1 Horizontal Fade-Out of GIF image to gold background color.</h2>

<h2 class="g2">g2 Horizontal Fade-Out of any background color to PNG image.</h2>

<h2 class="g3">g3 Vertical Fade-Out of GIF image to white background color.</h2>

<h2 class="g4">g4 Vertical Fade-Out of JPG image to white background color.</h2>

<h2 class="g5">g5 Vertical Fade-Out of any background color to PNG image.</h2>

<h2 class="g6">g6 Vertical Fade-Out of PNG image to any background color.</h2>

<p class="g7">g7 Vertical Fade-Out of PNG image to any background color from top and

bottom.</p>

CSS

.g1 { background:url("h-white2gold.gif") repeat-y left top gold; }

.g2 { background:url("h-trans2white.png") repeat-y right top royalblue; }

.g3 { background:url("v-gold2white.gif") repeat-x left top white; }

.g4 { background:url("v-lightning.jpg") repeat-x left top white; }

.g5 { background:url("v-trans2white.png") repeat-x left bottom red; }

.g6 { background:url("v-white2trans.png") repeat-x left top green; }

.g7 {background:url("v-white2trans.png") repeat-x left top, url("v-trans2white.png") repeat-x

left bottom green; }

/* Nonessential rules are not shown. */