Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
A more recent way to define transparency for objects through CSS, is through the use of RGBA and HSLA syntax. Now this technique involves passing an alpha value through a regular RGB or HSL color definition. And what's nice about that, is you can then define the transparency on either the foreground color, background color or border color really anything that you can apply a color to. And this allows you to have varying degrees of transparency within the element.
So I have got the rgba.htm file open and this is found in the 06_06 folder. I just want to preview this for you really quickly to kind of show you what's going on in this file. Okay, so here we have a wrapper div that's got a background image inside of it. And then we have got the two banners here that now just have sort of solid colors in them. Now this demonstration alone sort of gives away one of the weaknesses of this technique, which is I can't apply these alpha values to background images, only the color definitions themselves.
All right, so I want to go back into my code and I'm going to play around with these background definitions here. Now in order to use the rgba and hsla, the A, by the way, stands for alpha, all I have to do is modify the syntax slightly. So for rgb, I am just going to type in rgba. So you just make sure again this one contiguous definition there (rgba) and then I have to pass along a fourth value, so the order in which these appear really does matter. I am going to type in a comma and now I can pass in a transparency value, just as with opacity, that transparency value is going to be based on a range of zero to one.
So if you want it to be semi- transparent, you are going to be using decimal notation here, I am just going to do .2 so that will be 20% opaque. I am going to do the same thing for hsl and again you just add an a to the color definition (hsla) and we pass in another comma and again our fourth value is going to be that alpha value so here I am just going to do something say (.6). All right, so if I save this and preview it, I notice that we get the transparency on the background.
Now what I really want you to notice here and the thing that I am most interested in pointing out, is that while the backgrounds are now semi-transparent, notice that the borders are not. The border is still fully opaque. Notice that the text is not, so the content of the element is still totally opaque. So this is a much more flexible way of defining opacity on individual parts of the element as long as you're using a color definition for this. So essentially, using this technique, you can define transparency anywhere that you can define color values, again the downside that I mentioned before is that there is currently no way to extend the transparency to background images, and I also think that is worth mentioning that prior to Internet Explorer 9, IE support of both HSLA, RGBA and the opacity property that we saw in the last movie, was really pretty spotty.
So be sure to explore ways that you can add support for opacity to Internet Explorer, if you're needing to support older versions of Internet Explorer starting at version 8 and going down.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.