Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
The Level 3 color module provides two ways for dealing with transparency. The opacity property, and by specifying an alpha value in an RGBA or HSLA color declaration. In this movie, we'll explore both of those approaches and when one technique is appropriate to use over another. So, here I have the 03_02.htm file opened up and you can find that in Chapter_03 03_02 folder. Now if I preview this in my browser, this may look familiar to you. If you've been watching the title in order, you've probably seen this before, because this is an art of detecting support for Internet Explorer movie.
Essentially, what we have is a photograph of the Coit Tower and some descriptive text layered on top of it. Now what I'd really like to do is use transparency here so that I can see more of the photograph behind it, but still keep the text readable, just sort of enhance the styling with some semitransparent backgrounds, and colors, and things like that. So if I go back into my code editor, one of the first things that I think about using is that opacity property that we talked about. So let's take a look at the structural page where it might be appropriate to use. If I scroll down, I can see that we have a very simple page.
We have three div tags. box1, box2, and box3, and they are overlaying obviously, a background image, that's applied to the wrapper. So if I go back up to my selectors, the box1 selector, that's that main box, the largest of the div tags in the back. What I'm going to do with that is just go ahead and apply an opacity setting to it. So just do opacity. I am going to do it 0.5. Okay, so what about -- what's about that value? Well, remember one would be of 100% opaque. 0 would be totally transparent. So, .5 is 50%.
So if I save this, and again preview it in a browser, I can see what happens to my div tag. So it is semitransparent. I can see the photograph behind it. But the bad thing here is that it's hard to read. I can't really read it all that well. It's still like a way maybe of keeping that text really bright and readable, while having maybe the backgrounds be a little see-through. Now if I'm using the opacity property, I can't do that to the div tag, because that makes the entire div tag semitransparent. I'd have to start layering code and maybe adding another div tag in there, that sort of thing.
So, now we're going to take a look at using that HSLA or RGBA declaration to see how that could help us. So I'm going to go back into my code. I'm just going to go ahead and get rid of that opacity property. What I want to do now is change my background to hsla. So I'm adding a little A down there, indicating that I want to pass an alpha transparency value and then in my values, I need to add one more comma. Here I'm going to type in 0.5. So again, that will be 50%. Same amount of opacity that we had on it before. But this time it should only apply to the background.
So let's go ahead and test that. Perfect! So now my background is semitransparent. I can still see the image behind it. But the border and the text, I haven't changed opacity at all. So they're still fairly easy to read. That's exactly what I was going for. Now let's take that a little bit further by taking our second boxes and changing the transparency based on different properties. So we're going to set the border to one transparency, the background to another, and even the foreground text to a transparency as well.
So if I go back into my code, I'm going to scroll down to box2 and take a look at what I can do with this. So here I'm going to change the background to hsla. After that, I'm going to type in a comma and we'll just do 0.25. For color, again I'm going to modify that, so that it's hsla to pass the alpha value. After the last value, another comma, and this one is going to be 0.75. Then finally for border, I'm going to go to the color declaration of the border and do hsla and that will be comma 0.5.
Now you may be wondering about the zeroes. Are they really necessary? I will say yes. In some browsers, I've noticed some real old sort of buggy behavior if the zero isn't there. It's supposed to be okay no matter which way you do the syntax, but my advice to you is go ahead and put the zeroes in there. All right, so I'm going to save this. Let's go down to our box3. We're going to do pretty much the exact same thing. So background is going to get hsla. The value for that is going to be 0.25. Perfect! Color is going to be hsla.
The value there is going to be much darker, 0.75, so much more opaque. Then finally border, hsla, don't forget the A, and the value there is going to be 0.5 again. So we'll go ahead and save that. Preview that in our browser. Again you can see now we have varying degrees of transparency. The backgrounds of these guys are extremely transparent. You can really see the image behind them. The borders are not so much, although you can see through the borders. You can even see the border joints here as a matter of fact, which gives it kind of an interesting decorative effect.
So, that's pretty cool! Okay, so what happens again if you test this in Internet Explorer? Well, if you watch the earlier movie, you know exactly what happens. You just get really crappy un-styled content. Now in the previous movie about detecting support for Internet Explorer, I showed you guys how you could just go ahead and sniff out support for CSS3 and then present totally different styling which didn't have any opacity whatsoever. Internet Explorer does give you kind of a sort of an out for using transparency. It allows you to set background colors by using a filter, which applies basically a gradient filter.
You can use a gradient filter to sort of fake transparency by going from the same colors to the same color and then lowering the opacity in the filter for both of those and this is an Internet Explorer only filter. So my advice is to generate these and then pass them to these conditional comments. Now we are not going to go that deep into it, but I do want to show you a place where you can go read more about it and even generate these yourselves. So, here I'm on the Kimili page, or Kamili. I'd really don't know how you pronounce it. Kamili is probably better.
This is the RGBA and HSLA CSS Generator for Internet Explorer. Now this is published in 2009, but it's been updated over and over again, over a period of time, so you can bookmark it, come back to it, and see if there are any changes to it. Now what this is going to allow you to do is you're going to go ahead and input an RGBA or HSLA definition here. I'm just going to go ahead and do the one that we've been using. I'll type in hsla and then inside that, I'll do 41, 44%, 44%, 0.25.
Now remember, that's the exact one that we were using earlier for our boxes. You can see exactly what we get here. We get a background transparent and then this vendor specific Microsoft filter code, and then another filter for older versions of Microsoft, the IE6 and 7. So this is pretty odd code. I certainly won't want to have to do this to myself. You can see you're mixing hex values. So you have to come up with the HSLA value of that and then find a hex value of that and then put those together. This does that for you, which is really, really nice.
So what I'm going to do here is just starting with this background, I'm just going to copy this entire thing. I don't need the brackets. I'm going to go back into my code. I'm just going to pick one of these boxes, the second box is fine, and then what I'm going to do is directly after the HSLA background definition, I'm going to paste this in. Now you don't have to do this. This is not required for this particular exercise. I just want to show you how this works. If I save this and if I preview this in Internet Explorer, again you can see we are still getting really terrible installed content.
But that one div tag's background is semitransparent. So, I could again offer additional styling for this by detecting support. That could be done through these conditional comments, through using the Modernizr library like we did earlier, and then I can just go ahead, grab these filters from that generator on the site, or read up on how to do it myself, and add them. So that you can at least get some background transparency support in Internet Explorer. You just sort of have to decide whether it's worth it in terms of what you're looking for stylistically to jump through all those hoops.
So outside of Internet Explorer, dealing with transparency in CSS3 is really not that hard. It just requires a little bit of attention. Now first, be sure which technique is right for your current situation, whether you want to use opacity or an alpha value on a color declaration. Next, be sure to provide some fallback content for non-supporting devices or in the case of Internet Explorer, supply gradient filters to simulate that alpha effect if you really, really want it. Now you may also want to consider serving IE content through conditional comments.
I'm really big fan of doing that. Although it does take a little bit of work to get transparency values working as widely as possible, the ability to control transparency globally or individually for properties like the border, background, and foreground colors opens up a lot of possibilities for you as a designer.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.