Code examples from Visual Stylin' with CSS3 by Charles Wyke-Smith
.spiral1 {
opacity:1; /* no transparency */
}
.spiral2 {
opacity:0.5;
}
.spiral3 {
opacity:0.2;
}
1 .9 .8 .7 .6 .5 .4 .3 .2 .1
color:hsla(200,100%,50%,.4)
ALPHA
<div class="basic_opacity fig37">
<div class="alpha">
<p>
<span class="aph1">A</span>
<span class="aph2">L</span>
<span class="aph3">P</span>
<span class="aph4">H</span>
<span class="aph5">A</span>
</p>
</div>
</div>
.basic_opacity.fig37 .alpha {
font-size:130px;
line-height:0;
margin:0 0 0 3px;
height:auto;
}
.basic_opacity.fig37 .alpha p span {
font-family:Arial Bold, verdana, sans serif;
font-weight:bold;
}
.basic_opacity.fig37 .aph1 { /* A */
color:hsla(325,100%,65%,.5);
margin:0 0 0 0px;
}
.basic_opacity.fig37 .aph2 { /* L */
color:hsla(31,100%,54%,.5);
margin:0 0 0 -30px; /* negative left letter kerning */
}
.basic_opacity.fig37 .aph3 { /* P */
color:hsla(186,87%,55%,.5);
margin:0 0 0 -26px; /* negative left letter kerning */
}
.basic_opacity.fig37 .aph4 { /* H */
color:hsla(31,100%,54%,.5);
margin:0 0 0 -30px; /* negative left letter kerning */
}
.basic_opacity.fig37 .aph5 { /* A */
color:hsla(325,100%,65%,.5);
margin:0 0 0 -30px; /* negative left letter kerning */
}
<div>
<h2>Hydrangeas</h2>
</div>
background:url(pics/pink_hydrangeas.png) no-repeat center;
opacity:.5;
background:url(pics/pink_hydrangeas.png) 0px 0px no-repeat;
background:linear-gradient(top, hsla(0,0%,100%,.85) 0%,
hsla(0,0%,100%,.85) 100%), url(pics/pink_hydrangeas.png);
background:radial-gradient(
center, ellipse cover,
hsla(0,0%,100%,0) 0%, /* center */
hsla(0,0%,100%,0) 64%,
hsla(0,0%,100%,1) 71%,
hsla(0,0%,100%,1) 100% /* outer edge */
),
url(pics/tulips.png) 0px -0px;