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:

Tags: Casacading Style Sheets, css, css3

This entry was posted on Friday, July 20th, 2012 at 12:10 pm and is filed under cascading style sheets, css, css3. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.