Log on to your interface.

The status of your project is available to you at all times by logging in here. If you forgot your credentials, it's fine, you can recover them here.

Account Info

Use RGBA on a Web design when you want just the parent element to have a certain transparency as a background.

RGBA, CSS3 property for Web Design

In our previous topic, we discussed opacity in Web design, and how it is a bit limited since child elements inherit the opacity set on its parent when what we really would like to do is set this opacity to the parent element only. A way around this is to use RGBA instead of the opacity property on a Web design.

Pretty much every Web design has worked extensively with hexadecimal values to display colors (backgrounds, text, buttons, etc). RGBA uses the RGB values to display the same values you would use hexadecimal numbers for. But the A value is where things get interesting. The A is for the alpha value and its function is to control the level of opacity for that particular RGB value. 1 is the least opaque value and 0 is completely transparent.

RGBA opens the possibility of having backgrounds of any color with a transparency that is controlled by the Web design. It’s the same effect as having a transparent image via Photoshop, but there is no need to download an asset (image) when CSS can do the job for us.

This may be small potatoes for a big Web design project due to being less requests for files on a server, but when you start adding hover effects with transparency on buttons, menu items, etc it starts to add up. Using CSS can drastically reduce the amount of requests for achieving the same effect via a PNG image with transparency. We are making a Web design much more efficient.

Syntax of RGBA

We have seen this code countless of times:


.mytext {
color:#ffffff;
background:#000000;}

Which displays the following:

Hello

Nothing out of this world.

Using RGBA we can achieve the same effect but with RGB and the Alpha value set to 1:


.mytext {
color: rgba(255,255,255,1);
background: rgba(0,0,0,1);}
Nothing out of this world

No difference between either (assuming you aren't looking at this on Internet Explorer 8 or below, more on this later).

Now let's play around with the Alpha value. We are going to tone the Alpha value to half of it.


.mytext {
color:#fff;
color: rgba(255,255,255,1);
background:#000;
background: rgba(0,0,0,0.5);}
Opacity on the background but no the text.

Note the difference. This is how simple it is (a few lines of code and no need to use background images). The text has no opacity but the background does.

A practical example: CSS3 button.

We are going to make a basic button with CSS3 and when the user hovers it the background color will change alongside some opacity. Refer to our rounded corners tutorial for more info. The code to have a button would be more or less be like:

Normal state button


div.boton a {
margin:0 auto;
display:block;
width:100px;
text-align:center;
height:20px;
padding:10px 0;
color:#fff; /*no RGBA I want all white */
background:rgba(39,124,145, 0.35); /*very low to note the difference */
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}

Button when hovered:


div.boton a:hover {
color:#fff;
background:rgba(39,124,145, 1.0); /*no opacity, normal state */ }

Which will give us the following:

Note that once again, no images were used to achieve this effect. With CSS3 we have made a button with transparency and rounded corners; back in the good 'ol days, we needed a background image for the entire button and rounded corners on both normal and hover state. Sans two requests now.

Advantages of using RGBA and rounded corners for a button:

Why that over a sprite with two active states? Here are a few more:

  1. No extra resources.
  2. SEO: We are using anchor text to display the button. With images, we would be embedding the text on the actual image.
  3. Maintenance: Client comes and says, "hmm maybe I want this to be a bit more blue". Going CSS only, it's a few lines of code; going the other route is pretty much firing up Photoshop, making the changes, connect to your Web server and upload the changes. You tell me which one is better and easier for you.

On what elements should I apply RGBA within a Web design?


The white and orange button have certain transparency. It's very evident on the white area.
  • Backgrounds: We covered this one. The image to your left has a RGBA background (white).
  • Text: If we want to give our text a different look, we can use RGBA.
  • Borders: Borders that have some transparency? Absolutetely possible with RGBA but note that you must use it in conjuction with another CSS property called background-clip.

  • Buttons and menus: : Basic elements within a Web design. We have covered this one already.
  • Note the shadow on the lower left side. It's a dark brown with certain transparency.
    Shadow intensity: There is another CSS3 property called box-shadow which gives a box element a shadow. To not divert much from the subject (we will explain this property on another entry) you can put intensity on the shadow element through RGBA. Note in the Web design we made for Candelas Monterrey it's quite evident (image to the left) the shadow on the paper element. The color chosen is a brown with a certain transparency.
  • Text shadow intensity: EThere is also a CSS3 property called text-shadow which does what it says, give text a shadow.

Internet Explorer again, screwing it up

Unfortunately Internet Explorer 8 and below do not support RGBA, but what we could do is implement some graceful degradation. The solution would be to have a background with hexadecimal values instead of using RGBA doing it as follows:


.mitexto {
color:#fff;
color: rgba(255,255,255,1);
background:#000;
background: rgba(0,0,0,1);
}

Older browsers will ignore the RGBA syntax whilst newer ones will use both, but since we are declaring the RGBA value after the hexadecimal one, the RGBA will be the one used.

Another option is to resort to a PNG semi-transparent and use that image as a background (repeat). This is the option we like to use the most, even if it's more resources for IE users.

This would be our solution for IE users:

.ie8 .mitexto {
color:#fff;
background:#000 url(imagen-transparente.png) 0 0 repeat;}

The .ie8 class is only available for Internet Explorer 8 and below users through a logical statement (asking if the browser is IE8 and below). It's a technique I recently read on Paul Irish's blog. I recommend reading his discussion about IE conditional classes as opposed to IE conditional styles.

We know we are including more assets for IE users but we are only doing it for some browsers and modern browsers (the ones everybody should use :)) will not download the resource at all (since it's conditionally declared).

Wrapping up

RGBA makes the choices for you as a Web designer, even greater. With little syntax and less resources, it's a win-win situation. I sincerely hope you use this technique.

Drop your bomb