Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS: Page Layouts introduces basic layout concepts, gives advice on how to create properly structured HTML based on prototypes and mockups, and goes into critical page layout skills such as floats and positioning. Author James Williamson shows how to combine these techniques to create fixed, fluid, and responsive layouts. Designers are also shown how to enhance their pages through the creative use of CSS techniques like multi-column text, opacity, and the background property. Exercise files are included with this course.
Needing to control an element's opacity is a common occurrence in page layout. In CSS we have two primary means of controlling transparency: the opacity property and using the RGBA or HSLA color declarations. So I am going to be working with the opacity.htm file, which is found in the 08_05 directory. Just to give you a heads-up on the structure of the page, if we scroll down, after some descriptive text, we have a section that has three different div tags in it, and they have a class of opacity, alpha, and background.
If I just preview that in the browser, you can see what's happening. The div with the background has the image in beside it, and we have a div tag on the left-hand side that we are going to use the opacity property for. Then we have a dig tag on the right- hand side that we are going to use alpha transparency for. Okay. So if I go up into my code, I can see I already have some selectors for those two elements, so we are just going to start adding properties directly to them. The first one, and probably the easiest one to do, is the opacity property. So if I go into the opacity selector, I can just use opacity, and I can give it whatever value I want.
Now the values for opacity range from 0 to 1. 1 being totally opaque, and 0 being totally transparent. If I do .5, for example, that's going to be 50% opaque. So if I save the file, go into my browser, and refresh that, you can see that element is now about 50% transparent. Now almost all browsers support the opacity property. Now earlier versions of Internet Explorer prior to version 9 didn't support opacity, but there is a quick and easy way to achieve support for IE. If I go right down below the opacity property and I type in filter, and then I say alpha and then inside alpha filter I do opacity and I can say =50.
Now this is a proprietary Internet Explorer property. So if there is some type of a validation test that your CSS has to pass, this is not going to validate it. It's not a valid CSS code. But it will work in IE, and it's not going to harm any other browser, so I really don't see the harm in having it in your code. So, if I save this, and now I want to go down into alpha and talk about different alpha transparencies that we can use. You see right now that the background color of our file is an rgb value, and one of the nice things that has happened recently with CSS is we've begun to have support in browsers for rgba.
So I am going to change both the border and the background to rgba values. Now rgba adds a fourth value in the declaration, and that fourth value is going to be alpha transparency. Now what I like about this, more than the opacity property, is you saw that with the opacity property the entire element was transparent, so it really affects everything. With alpha declarations, anywhere that you can apply a color value you can choose a separate alpha value.
So you could see after the commas I've added here to the rgba, I can just pass in different values. So, for example, border, I could pass in .8. So in terms of the color range, it's still the same. It's 0 to 1. Then for the background, for example, after that particular comma, I could say .5. So if I save that, go back into my browser, and test it, now you can see that the border has a different level of transparency than the fill, and even more importantly, you will notice that the content is left unaffected.
So the content remains at 100% and the background and the border in this case remain semitransparent. If I wanted to, I can certainly give a color declaration and use rgba as well. Now in addition to rgb, we also have support now for hsl, and that's hue, saturation, and lightness, if you will. So the hsla is supported too. Now their values are hue, saturation, and a lightness value. The hue is just from a degree of 0 to 360. So I am going choose something in a blue range, let's say around 280.
I will do that for both of these. And then your brightness and your saturation is passed along as percentage values. So for saturation, I am going to take the background and really desaturate it. Maybe about 20%. And then for the border, maybe I will make that more saturated, say 50%. Brightness value is the same way. Maybe I'll keep the background kind of dark, maybe about 30%, and for the border maybe I will make that a little bit lighter. Let's say 50%. And I will do the same thing for the alpha, so 50% for the background, 80% for the border.
So if I save this and go into the browser and test it, you can see the color has changed slightly and we get, again, transparency for the border and background that are different. So you can use either hsla or rgba; it doesn't matter which one you use. Now I mentioned before that getting the opacity property supported in earlier versions of Internet Explorer wasn't that difficult. rgba is a little bit trickier. It is supported in IE9, but prior to IE9, getting Internet Explorer really to work with transparency, especially using alpha values like that, it was actually pretty difficult.
So I want to show you an article written by the just absolute brilliant Lea Verou, who, if I scroll down a little bit, this is--if you just search for bulletproof, cross-browser RGBA backgrounds today, on her blog, Lea.verou.me, then you will get this article. What is awesome about this--it's a little old it was written in 2009--but that's okay, because it's for earlier versions of Internet Explorer. She goes through all the different syntax that you need in order to get it supported for that. So if you want to use rgba and you really want solid cross-browser-compliant code, this is a great article for you to read.
So being able to control transparency natively through CSS is extremely helpful for creating complex and creative page layouts. There is a lot really cool stuff you can do with it. Now keep in mind that you may need to provide fallback support for earlier versions of IE, but for the most part, the syntax is easy to remember and easy to use.
There are currently no FAQs about CSS: Page Layouts.
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.