CSS3 Tutorial: transparancy (opacity)

Transparancy  with CSS3

Using the following CSS3 property opacity and rgba value of a particular color we can set up the degree of transparancy (opacity) of a DOM element

opacity

Syntax: <number>
opacity: 0.75;

rgba()

Functional notation : rgba()
background: rgba(0, 0, 0, 0.5); 
/* Herein the color is rgb(0,0,0), hence black, and the opacity(a) = 0.5; 0=transparant; 1=opaque;*/

Example1: Four overlapping rectangles with various color in rgba().

The HTML code

<!DOCTYPE html>
<html>
<head>
  <title>Transparantie (opacity) met CSS3</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="css/articles_styles.css" rel="stylesheet" type="text/css" media="screen">
  </head>
<body>

  <div id="container">
  <div class="kader1_opacity100">
  red<br/>
  opacity 1
  </div>
  <div class="kader2_opacity75">
  black<br/>
  opacity 0.75
  </div>
  <div class="kader3_opacity50">
  black<br/>
  opacity 0.5
  </div>
  <div class="kader4_opacity25">
  red<br/>
  opacity 0.25
  </div>
  </div>
  
</body>
</html>

The CSS

div#container{
  margin:20px;
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 12px;
  }  

div.kader1_opacity100{
  background: rgba(255,0,0,1.0)
  color:#000;
  height:190px;
  width: 190px;
  float:left;
  margin: 20px;
  text-align: left;
  padding-top: 10px;
  padding-left: 10px; 
}  

div.kader2_opacity75{
  background: rgba(0,0,0,0.75)
  color:#000;
  height:190px;
  width: 190px;
  float:left;
  margin: 20px 0 20px -120px;
  text-align: right;
  padding-top: 10px;
  padding-right: 10px;
}  

div.kader3_opacity50{
  background: rgba(0,0,0,0.5)
  color:#000;
  height:40px;
  width: 190px;
  clear:left;
  float:left;
  margin: -120px 20px 0 20px;
  text-align: left;
  padding-top: 160px;
  padding-left: 10px; 
}  

div.kader4_opacity25{
  background: rgba(255,0,0,0.25)
  color:#000;
  height:40px;
  width: 190px;
  float:left;
  margin: -120px 0 0 -120px;
  text-align: right;
  padding-top: 160px;
  padding-right: 10px;
}  
Transparantie door middel van rgba
Image 1. Transparancy using rgba

Check this example in your browser

Example 2: Four overlapping rectangles with various color with opacity.

In the preceding example we saw two CSS3 properties which take care of transparancy: opacity en rgba. The main difference between the two is that opacity affects the transparancy of the element and everything within the element, like text, images etc. while rgba on the other hand only effects the transparancy of the background or color of the element. When in example we had used opacity instead of rgba , then we wouldn't have seen the black text inside the element; the text would have been fully transparant. See Image 2

The CSS in article_styles.css in which rgba() is replaced by opacity

div#container{
  margin:20px;
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 12px;
}  

div.kader1a_opacity100{
  background: #f16529;
  color:#000;
  opacity: 1; /* eigenlijk onnodig: opacity is 1 standaard */
  
  height:190px;
  width: 190px;
  float:left;
  margin: 20px;
  text-align: left;
  padding-top: 10px;
  padding-left: 10px; 
}  

div.kader2a_opacity75{
  background: #000;
  color:#000;
  opacity: 0.75;
  
  height:190px;
  width: 190px;
  float:left;
  margin: 20px 0 20px -120px;
  text-align: right;
  padding-top: 10px;
  padding-right: 10px;
}  

div.kader3a_opacity50{
  background: #000;
  color:#000;
  opacity: 0.50;
  
  height:40px;
  width: 190px;
  clear:left;
  float:left;
  margin: -120px 20px 0 20px;
  text-align: left;
  padding-top: 160px;
  padding-left: 10px; 
}  

div.kader4a_opacity25{
  background: #f16529;
  color:#000;
  opacity: 0.25;
  
  height:40px;
  width: 190px;
  float:left;
  margin: -120px 0 0 -120px;
  text-align: right;
  padding-top: 160px;
  padding-right: 10px;
}
  

Transparantie door middel van opacity
Image 2. Transparancy using opacity

Check this example in your browser

Leave a comment