Web Teacher

The RGBa color specification in CSS3 is almost ready for prime time. Most browsers (except IE) support the spec. Show your wizard skills by learning to use it.

I’ll show you how to create a partially transparent background behind a paragraph using RGBa. The result will look like this:

You get control over the alpha channel with RGBa. The RGB represents red, green, blue. The A represents alpha transparency, or degree of opacity. In this color specification, there is no hexadecimal notation, the only allowed values are integers  (0-255) or percentages (0%-100%). Here’s an example.

p {color: rgba(0,0,255,0.5)}

The rule creates a paragraph that is a semi-transparent solid blue. The four integers in the declaration mean there is 0 red, 0 green, 255 (or 100%) blue, with an alpha transparency value of 0.5.  The values for the A can range from 0.0 which is completely transparent, to 1, which is complete opaque.

em {color: rgba(255,0,0,0.25)}
p {color: rgba(100%,50%,0%,0.8)}

The first rule creates an emphasized element that is solid red and very transparent with the value 0.25. The second rule styles a paragraph with percentage values. It would display as a slightly transparent orange.

Here’s how I created the example you see above. The HTML is

<div id="ex">
<p>Strawberries </p>
</div>

The CSS is

#ex {
width: 542px;
height: 80px;
background: url(img/strawberry-bg.jpg) no-repeat;
border: 2px solid #999;
}
p {text-align:center;
font-size: 2em;
background-color: rgba(255,0,0,.5);}

You can use RGBa in CSS anywhere you use color: a background, a border, a heading, etc. To control what is shown in browsers that don’t support RGBa, give a normal RGB declaration, followed by and RGBa declaration. Non-compliant browsers will simply ignore the rule they don’t support. Compliant browsers will use the last rule in the cascade.

color: rgb(255, 255, 255,);
color: rgba(255, 255, 255, 0.5);

With pseudo elements like a:hover, the degree of opacity can be used to create beautiful and informative effects.

Tweet

Stumble it!