Code examples from Visual Stylin' with CSS3 by Charles Wyke-Smith

Section 4 • Opacity

swirl swirl swirl
.spiral1 {
  opacity:1; /* no transparency */
  }
.spiral2 {
  opacity:0.5;
  }
.spiral3 {
  opacity:0.2;
  }
Figure 33: Images with opacity settings of 1, 0.5, and 0.2, from left to right.

1 .9 .8 .7 .6 .5 .4 .3 .2 .1

color:hsla(200,100%,50%,.4)
Figure 35: Various levels of opacity of HSLA colors. The code example shows an opacity level of 0.4—40% opaque.

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 */
  }
Figure 37: An eye-catching combination of a bold font, negative letter spacing, and semi-transparent HSLA colors.

Hydrangeas

<div>
  <h2>Hydrangeas</h2>
</div>

background:url(pics/pink_hydrangeas.png) no-repeat center;
Figure 40: The type is not easily read on the detailed image.

Hydrangeas

opacity:.5;
background:url(pics/pink_hydrangeas.png) 0px 0px no-repeat;
Figure 43:Setting 50% opacity on the element to lighten its background also lightens its child text.

Hydrangeas

background:linear-gradient(top,  hsla(0,0%,100%,.85) 0%, 
hsla(0,0%,100%,.85) 100%), url(pics/pink_hydrangeas.png);
Figure 45: Here I add a solid white background over the background image and set its alpha channel to 0.85.
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;
Figure 47: A background gradient with a transparent center overlays a background image.