Techie Tip of the Week: Setting Opacity with CSS3

With the advent of CSS3, you can now add opacity levels to your colors and backgrounds on your web site.

One way to add opacity is to use the opacity property:

background: [desired color]; opacity: [opacity level from 0 to 1 -- e.g., .5 is 50%];}

Another way is to use the new rgba (red, green, blue, alpha transparency) or the new hsla (hue, saturation, lightness, alpha transparency) properties:

background: rgba([amount red], [amount green], [amount blue], [alpha transparency level from 0 to 1]);}

background: hsla([amount hue], [amount saturation], [amount lightness], [alpha transparency level from 0 to 1]);}

For example:
20120721-121406.jpg

Tags: , ,

2 Responses to “Techie Tip of the Week: Setting Opacity with CSS3”

  1. Lakeisha Ealey Says:

    I like this post, enjoyed this one appreciate it for posting .

  2. Carol Ehigiator Says:

    Thanks , I have just been looking for info approximately this subject for a long time and yours is the best I’ve came upon so far. However, what concerning the conclusion? Are you certain in regards to the source?

Leave a Reply

You must be logged in to post a comment.