ex piation/blog

I love messing with opacity, when alpha opacity filters began to be supported in the early 2000s I was a very happy girl. However, the filter was limiting because it would apply to everything within that element.

The next solution was transparent pngs to get the look of a transparent background color.

However, I recently discovered rgba redering both solutions unnecessary when it comes to using alpha opacity on colors. Setting rgba is easy:

.transparent-red-bg {
background-color: rgba(255,0,0,0.5);
}

The first three numbers are the rbg code for the color, and the last number is 0-1 setting of the alpha opacity.

rbga can be applied to backgrounds

<span style=”padding:20px;color:#FFFFFF;background-color:rgba(255,0,0,0.5);”>rbga can be applied to backgrounds</span>

It can be applied to colors

<h4 style=”color:rgba(0,255,255,0.5) !important;”>It can be applied to colors</h4>

form elements

<textarea style=”background-color: rgba(255,0,0,0.25)”>form elements</textarea>

and borders!

<span style=”border: solid 10px rgba(0,255,255,0.25);”>and borders!</span>

Any place in css where color can be defined rgba can be used to code the color. If you’re like me and in love with hexadecimal, there are a bunch of handy converters.