transparency/ opacity

Explanation: These CSS declarations allow you to control the transparency of an object (for example, a division or image). There are multiple approaches in CSS-3.

  • opacity (also thought of as an alpha value measured from 0.0 – 1.0, the former being invisible)
  • rgba (measured as red, green, blue values from 0 – 255 with an alpha ranging from 0.0 to 1.0)
  • hsla (hue is measured in degrees [from  0 - 360], saturation and lightness are measured from 0% – 100%, and the alpha value ranges from 0.0 to 1.0)

Example CSS code:

.boxrgba {
width:200px;
height:200px;
background:rgba(0,0,0,0.5);
color:rgba(255,255,255,1);
}

.boxhsla {
width:200px;
height:200px;
background:hsla(0,45%,35%,0.5);
color:hsla(31,34%,44%,1);
}

Example page (view the source code): http://learning-html5.info/CSS3/CSS_Opacity.html (works in most modern browsers).

References:

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>