Tag: CSS3

How to Look Like a Wiz with RGBa

Show your wizard skills by learning to use the RGBa color specification in CSS3.

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

the red color displayed with .5 opacity

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 strawberry 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 IE8 and older, 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. If you quit worrying about IE8 and older long ago, just use the rgba rule – all modern browsers support it.

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.

Note: Updated October 5, 2014 with current information.

Interview worth reading

Up Late with CSS3, and Loving It! is an interview by Miraz Jordan with Andy Clarke, John Allsopp and Dan Cederholm. There are many insights in the article, but here’s my fav from John Allsopp.

Jordan: Do you see a broad acceptance of web standards among professionals who create websites, or is it still an uphill battle? What causes people to stumble?

Allsopp: I think the key challenge we face as a profession is that we are still essentially self taught. Web design and development are rarely offered in computer science and design programs, and often covered badly when they are. So, unless developers new to the industry stumble upon the right books, sites, and communities, it’s likely they’ll start off on the wrong foot. Then they need to unlearn many techniques and skills.

In case you don’t know, John Allsopp is the creative mind that brought together the group of educators and industry leaders who have formed InterAct and are working to create an open web education alliance within the W3C.

One of the things Dan Cederholm mentions in the interview is RGBa. If you’d like to know more about RGBa, read Cederholm’s latest book or read Working With RGBA Colour by Drew McLellan at 24 Ways.