One of the great things about CSS is it makes things easy. I’ve had to make sites where the design has called for elements to have backgrounds with an alpha transparency of less than 100%. There’s two ways you can go about it, you can use a PNG and set it as the image background and use a png support hack for browsers like IE6 that don’t support PNG transparency or you can tell the designer, “no that’s not going to work in all browsers” and if you’ve ever worked with a designer, that one usually doesn’t work. Everyday, I try to move farther and farther away from using images for backgrounds and other styling as much as I can, but of course IE is making that harder than it should be.
And something like RGBa makes building sites 100% easier. Need a bit of transparency on that div in the top corner? One little bit of CSS and it’s done. So how do we do it? Well, for the most part, if someone wants to use CSS to give a div a background color or set the color of some text, you would use the hex color, ie. #FF0000, for red. But CSS also allows you to set the color using rgb, which gives you more control over your color, rgb(255,0,0) would give you red. And CSS3 adds one little thing to that and let’s us control the alpha of an element: rgba(0,255,0,0.5) would show something with half transparency. That’s it, just adding that one number on the end will let us control that. But what about opacity:0.5;? Well, let’s say you just want the background set to half transparency and the text to display normally. If you set the whole div to opacity:0.5; then everything in the div will be half transparent. But if you set the background:rgba(0,255,00,0.5); then you get a half transparent green background with normal text.
Here’s an example of what you can do. The HTML:
1 2 3 4 5 |
Now the CSS. I’ve added a webkit transition to show what you can do to highlight elements during the :hover state. Here’s the CSS:
1 2 3 | #redblock {width:200px; height:200px; background:rgb(255,0,0); background:rgba(255, 0, 0, 1);} #blueblock {width:200px; height:200px; background:rgb(0, 0, 255); background:rgba(0, 0, 255, 0.5); position:absolute; left:100px; top:100px; transition-property:background;} #blueblock:hover {background:rgba(0, 0, 255, 1); -webkit-transition-duration: 1s;} |
I’ve added in the regular RGB color setting so that Internet Explorer has something to display. This is just another one of those things that are great to use but you have to be careful because no version of IE supports it. Hopefully IE9 will and then we can start developing sites for all browsers that don’t require as much hacking as they do now. One thing I’d like to see added in a future version of CSS is something like URLa(background.jpg, 0.5) where we could control the transparency of the background image and use smaller images for patterns.