<div class="container">
  <h3>Opacity without child elements</h3>
  <div class="opacity100">opacity: 1</div>
  <div class="opacity90">opacity: 0.9</div>
  <div class="opacity80">opacity: 0.8</div>
  <div class="opacity70">opacity: 0.7</div>
  <div class="opacity60">opacity: 0.6</div>
  <div class="opacity50">opacity: 0.5</div>
  <div class="opacity40">opacity: 0.4</div>
  <div class="opacity30">opacity: 0.3</div>
  <div class="opacity20">opacity: 0.2</div>
  <div class="opacity10">opacity: 0.1</div>
  <div class="opacity0">opacity: 0</div>
</div>

<div class="container">
  <h3>Opacity with child elements</h3>
  <div class="opacity100">
    opacity: 1
    <p>Paragraph Element</p>
  </div>
  <div class="opacity90">
    opacity: 0.9
    <p>Paragraph Element</p>
  </div>
  <div class="opacity80">
    opacity: 0.8
    <p>Paragraph Element</p>
  </div>
  <div class="opacity70">
    opacity: 0.7
    <p>Paragraph Element</p>
  </div>
  <div class="opacity60">
    opacity: 0.6
    <p>Paragraph Element</p>
  </div>
  <div class="opacity50">
    opacity: 0.5
    <p>Paragraph Element</p>
  </div>
  <div class="opacity40">
    opacity: 0.4
    <p>Paragraph Element</p>
  </div>
  <div class="opacity30">
    opacity: 0.3
    <p>Paragraph Element</p>
  </div>
  <div class="opacity20">
    opacity: 0.2
    <p>Paragraph Element</p>
  </div>
  <div class="opacity10">
    opacity: 0.1
    <p>Paragraph Element</p>
  </div>
  <div class="opacity0">
    opacity: 0
    <p>Paragraph Element</p>
  </div>
  
  <p><small>Elements with an <code>opacity</code> value of '0' are invisible</small></p>
</div>

@import "compass/css3";

/* General Box Styling */
/*===========================*/

.container > div {
  display: inline-block;
  height: 100px;
  width: 100px;
  background: #d58a3c;
}


/* Begin Opacity Demo Styles */
/*===========================*/

div.opacity100 {
  opacity: 1;
}

div.opacity90 {
  opacity: 0.9;
}

div.opacity80 {
  opacity: 0.8;
}

div.opacity70 {
  opacity: 0.7;
}

div.opacity60 {
  opacity: 0.6;
}

div.opacity50 {
  opacity: 0.5;
}

div.opacity40 {
  opacity: 0.4;
}

div.opacity30 {
  opacity: 0.3;
}

div.opacity20 {
  opacity: 0.2;
}

div.opacity10 {
  opacity: 0.1;
}

div.opacity0 {
  opacity: 0;
}