It’s great to see 24ways back on the scene again, my favourite time of the year! RGBA is one of my favourite features of CSS3 because of, as you mentioned, its immense flexibility in setting the opacity of individual elements. The previous method of messing around with the opacity property was too cumbersome.

I’m looking forward to seeing the rest of the articles this month.

Great first article to start off with. Look forward to seeing what else is to come.

You didn’t mention usage of filter and gradients of two equal colours to workaround IE. :)

I look forward to seeing wider support for CSS3, very powerful features giving more flexibility within design & much simpler than hacking around – hopefully 24ways.org will have more CSS3 articles on the way soon!

Keep up the good work, it makes great reading over the festive period. CSS3 – much better than chocolate!

As ever, great article, and happy to see 24ways back for another year. Once again, Christmas is relegated to being the second-best thing in December!

I only recently started using RGBA in live projects – as far as browser support goes, it’s pretty decent, what with there being an easy (and valid) way to fall back to solid colours.

Cheers Drew! Looking forward to the the next 23 articles.

Oh, now it feels like proper Christmas!

RGBA, like all CSS3 features, makes our lives so much easier when setting transparencies. But, as you rightly mentioned on the article, it may not be practical for more commercial websites, with a big percentage of IE users, to use them because of the necessity of providing fallback colours.

Still, I wish it was more widely adopted and experimented with.

Personally, I’ve been using it more and more, in all kinds of scenarios: I’ll just grab the approximate colour for naughty browsers with the help of my dear xScope and save lots of development time with that.

Looking forward to the next articles!

That was new to me about RGBA, I am yet to read the full specs of CSS3, but that little bit you showed looks handy and can help to add that nice touch of detail to a site.

I recently blogged on this very topic. I would also suggest the use of IE’s filter property. With IE’s conditional comments added into the mix, you can cover all modern browsers.

http://jasonkarns.com/blog/2009/11/17/roy-g-biv-alpha/

I tend to find IE filters create a great deal of instability and unexpected behaviour, and so avoid them where I can.

Welcome back, 24Ways team!

I love the idea of using transparency in borders to blend them in a bit to a textured or photographic background. Tiny touches like that really lift an interface.

Varying opacity on hover is also a nice effect, but I’ve noticed a few sites doing this on elements that aren’t actually link targets, which I find distracting.

Bring on the rest of the month!

Great article Drew! Wonderful to have 24ways back again!

One really fun thing to do with rgba is to add just a little bit of CSS animation transitions to adjust the opacity of a button or link background on hover. It’s a fun little treat for the webkit users.

I just created a test page to try this out. In Safari 4 on the Mac, setting opacity on borders has some odd effects at each corner, particularly with thicker strokes. It’s like each side of the box overlaps at the corner, causing an overlay effect. Hard to describe.

It’s probably worth mentioning hsla also which does the same thing but using hue/light/saturation/alpha values. Although internally hsla values do map back to rgba colours in the browsers.

If you need to get support into older browsers that don’t support RGBA like Firefox 2 and below, you may be able to use canvas to emulate the effect. Firefox 2 doesn’t support rgba in CSS, but it does in canvas. You can generate a one pixel image with canvas, and set it as a background using data urls. While this might not sound like a very well performing solution, and certainly doesn’t work when javascript is disabled or the browser doesn’t have canvas support, it is a good solution for development. Once you put a site into production, you can embed the generated data url right into your css.

I’m finding myself using rgba more and more in my designs. Coupled with PNGs you can create some really versatile designs.

I have to agree with Drew. IE hacks using expression have to die. They are performing badly, are a security flaw and really if you do your design right it should look OK without transparency, too. IE users do not expect nice designs, they are used to getting a bad experience.

Nice to see 24ways back again! The fallback mechanisms were interesting as I’ve just started using rgba in my projects.

Looking forward to what 24ways has in store this year.

It’s worth noting that with RGBa borders in Safari 4.x, the corners overlap rather than form a single border. Firefox 3.5 renders them just fine though.

Good article!

Great article Drew. Amazing what fun it is to design again when you throw out the restrictions of the past and experiment with the new things we have in CSS3.

@JASON REED – CSSEdit has fantastic support for RGBa using the standard Leopard color pickers and opacity slider. Would love to see that added to Coda, etc.

As Nick Caldwell already pointed out, you get funny looking overlapping corners in Safari on Mac when using RGBA borders. I’ve been playing around with it for some time and found that you can tweak the intensity of the alpha channel up or down on two sides that are parallel. (top and bottom or right and left) Example Code:

border: 10px solid rgba(220,220,220,.05); border-bottom: 10px solid rgba(220,220,220,.06); border-top: 10px solid rgba(220,220,220,.06);

This renders a better effect for thicker borders and needs to be tweaked a little for certain colors but overall I find it works well.

Great first article Drew! I’ve been looking forward to 24ways returning for a while now!

I’ve been using RGBA a lot more over the past few months having recently read up on it (I hadn’t initially understood the difference between RGBA & Opacity) and as other people have said, it’s really flexible which is why it is a joy to use!

Nice to see 24ways is back and great article to get this season started. Can’t wait to find out what else you got for us!

A great start to 24 Ways/09—you’ve presented some nice, clean ways to implement rgba into designs. Many thanks.

Just switched out a area of our product from background image to a border with RGBA :-)

I’ve found rgba works really well in conjunction with text-shadow and box-shadow properties.

Browsers that support those also support rgba, so you can always use rgba and take advantage of the opacity control.

Great article, using rgba is my new year’s resolution!

One thing I do wonder about is when you mentioned using .png’s as a fallback for older browsers.

If you’re going to make a .png alternative for every rgba you’re using, why not simply just use .png’s in the first place?

Can’t wait for tomorrow!

Great article, thanks for the info! 24ways being back is the best thing about December :D

Man it feels good to have you back!

I’m new to this site having just had the URL passed on by Darren Turpin, but this is a first class, stand up tutorial. I’m subscribing in the hope that th remaining 23 are as good and informative as this one, and crossing my finger’s that there’ll be a few without the standard “does not work in IE” disclaimer!

Nice article. I also think it´s better to use fallback colors for IE than the filters. I avoid IE Hacks wherever I can. It keeps the code clean and maintainable.

1. h1 {
2. background: transparent url(black50.png);
3. background: rgba(0, 0, 0, 0.5) none;
4. }

Am I right in the assumption that this actually loads black50.png first?

This would abolish the speed benefits you get from using rgba();.

Whats about using :
1. h1 {
2. background: rgba(0, 0, 0, 0.5) none !important;
3. background: transparent url(black50.png);
4. }

I’m not sure how that renders.
But for me it seems logical that browsers like FF, Safari, Co. are ignoring the second background property.

Of course this would remove some flexibility because you are using !important.

Just an idea & not tested (yet).

Regards,
Martin

That’s a powerful addition to CSS and this site design really shows it off. Google Chrome seems to have real issues rendering it on my machine though – the page won’t scroll properly, it’s really jerky. Firefox is fine though. Anyone else having that trouble?

Looking forward to tomorrows post ;)

For me it works fine in Chrome (4.0.249.12) on Mac (10.5.8).
Srolling works, too.

Screenshot

Great article but I was curious about one thing. In your last example your screen-shot shows the nice transparent borders but you have not mentioned the need to use the background-clip property to get this affect. Without it the border sits on top of the background colour.

Therefore the code sample at the end should in fact be:

div{ color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); border: 10px solid rgba(255, 255, 255, 0.3); -webkit-background-clip: padding; -moz-background-clip: padding; background-clip: padding;
}

In my quick test it doesn’t seem that Opera support background-clip and of course this generates the odd corner behavior in Webkit that others have mentioned.

Great article Drew – I love any way to speed up pages without harming the aesthetics, and I’m sure IE will catch up in their next version – they’re not so bad at that these days.

There’s one thing I think is missing from this technology. In your ‘HEADER 1’ example, you’ve shown the BODY with a patterned background, the DIV with a solid white and then some RGBA transparency on the H1 so it partially shows through to the DIV. What if you wanted the type to show through all the way to the BODY background but still keep the rest of the DIV solid white?

I suppose there would have to be another property where you specify through how many elements you want to ‘burrow’ the transparency. Unless I am being dumb and there is a way?

Excellent article to start this year with.

Never worked with rgba values before but after reading this I’ll definitely be experimenting with it now in some personal projects to see how I get on with it.

Could be a useful technique with image heavy sites

I love the look of this site and the use of CSS3. Only found it for the first time today. Surprised I have heard of it before. Great idea.

Well done and I look forward to the rest of the articles this month.

First time reader, found your post on twitter from @smashingmag. It’s really refreshing to read comments from actual people!

*For Sean Reed above, I use Instant evedropper on windows to snatch colors off the screen and it allows about a half dozen of reporting choices.

*For Nick Caldwell – post a link, I want to see what you’re talking about

*For 24ways – After reading the article, I ran your site thru my IE emulator tool, and it looks ok in IE7, but returns to the flat 100% opacity in IE8. As for IE5 – wow, it looks like crap. But I don’t think we have computers running on vacuum tubes anymore, so those IE5 users, all 3 of them, need to spend $300 at wal-mart and upgrade.

Great article, guys, I’m adding you to my daily read list.

Lovely work, folks. Welcome back!

Something I’ve been using in conjunction with rgba backgrounds for the last 6 months is Lea Verou’s rgba.php script. It automatically generates a transparent png file using URL parameters.

See her blog post Bulletproof, cross-browser RGBA backgrounds, today for more

Looking forward to what 24 ways has in store this January!

It’s too bad that Dean Edwards’ IE7/IE8.js scripts don’t include RGBA support…Anyone know of a javascript trick (other than using IE’s CSS gradient filter)?

Great article! I’ve never looked into RGBA before so it’s all new to me! Definitely going to be using it in the next tech design that I get.

Very good article… thanks 24ways!

I just had fun swapping out a few transparent png’s with rgba color values instead :)

I like the idea of using CSS rather than PNG’s – even in days of double figure broadband size is still important. I’m also hoping more design control (without the size overhead) is going to allow me to realise the mockups I work into html/css for some of my ‘print orientated’ designer friends.

I am concerned that the effort required in creating the IE fallback version will result in me tearing my hair out with frustration!

Great first article, really looking forward to the rest.

A useful (or atleast i have found it useful) plugin for Firefox when working with colors is Colorzilla.

Shows RGB and Hex in the status bar when the picker is selected, saves jumping into photoshop.

I don’t feel that rgba is really a very practical solution just yet.. since IE doesn’t support it. As web developers we have to support all the major browsers while being as efficient as possible. This means we have to support IE7 and 8 whether we want to or not. While you can get away with CSS3 rounded corners and fallback on standard square corners in IE, the use of transparency is often important to the aesthetics of the site/design and a fallback solution to standard RGB is not a practical solution in that case. PLUS, unless you specify the PNG image in an IE conditional-based stylesheet, your making ONE MORE http request for a png image for each transparency which is bloat that shouldn’t be there.

Overall.. i think this is a promising future, but premature to getting excited about just yet. Unless you really want to take the time to write out IE conditional styles, i think it’s better to put this one on that backburner for a while.

With that said, I still greatly appreciate the article and agree with the others, that it’s awesome to have you back!

Welcome back 24W! Great article to get this years issue rolling. Any chance of an article on CSS3 transitions/animation?

Great that 24ways is back this year!

I like the simplicity and focus of the first article, cant wait for the rest to follow.

And RGBA is really cool.

24 Ways is back! I hadn’t even realized how close it was to Christmas until I saw an unread post under “24 Ways” in Google Reader. I’m very excited for 23 more interesting and useful posts!

RGBA is fantastic (I’ve been using it on my blog since CSS-Tricks wrote about it) and there is an alternative fallback for IE that allows you to use alpha colors using “filter:progid:DXImageTransform.Microsoft.gradient” and a conditional stylesheet. I just realized, however, that many other people have suggested that, so, I guess I don’t have anything unique to mention. Oh well.

Very cool, I am looking forward to seeing more as the month unfolds.

Just for your information:
When using it the way as described in the article:
1. h1 {
2. background: transparent url(black50.png);
3. background: rgba(0, 0, 0, 0.5) none;
4. }

Webkit-based browsers will actually load the image due to a bug (https://bugs.webkit.org/show_bug.cgi?id=31630).

Gecko-based browsers (or at least Firefox) will not download the unneeded image.

So a workaround to avoid loading of unneeded images like described in my comment above is not needed.

Browsers will download the image (Webkit) or not (Firefox), no matter what you do.

You dont believe > Demo

To the 24Ways Team:
It would be great to have a more powerful discussion platform like DISQUS here. Some days ago there was an article that points out that discussions are actually one of the most important pieces of the web. And I think that’s true.

Awesome post, and Awesome site you really inspire me for me next theme.

I just fired up internet explorer to see how this site looks. How disappointing. This is an amazing design. Its a shame how terrible the support is on Internet Explorer for this. We have all these great features now but we are going to have to wait years for them to go mainstream so we can utilize them without hacks. I hate writing browser specific code. Its twice as much work.

Kyle: yes, we do look pretty bad in IE, that’s true. With more effort, it could look better, but IE users aren’t a big segment of our audience.

It’d be nice if we could have Hex with alpha like you can in OpenGL, etc. something like #rrggbbaa so rgb(255,255,255, 0.5) would be #ffffff80,

I agree with Drew, that you should take into consideration your audience and what browsers they use. I doubt anyone visited this site using IE6 as their preferred browser…

@JASON REED – I use this to convert from HEX to RGB and vice versa : Color Conversions

I think the disappointing thing about the IE support of this design is that it looks “as it should” in IE7, OK in IE6 and really poor in IE8.

Although I do appreciate IE represents a tiny percentage of the target audience for this site.

A wake up call to start playing with transparency in my designs again, yeeee, but unitl IE gets its act together I still have some reservations as to how productive it is to have CSS transparency and also .png transparency techniques on one project.

I think the clients budget will reflect whether I get to play with these techniques on a real project.

Great article! I didn’t know about transparency with CSS and now I feel I can start using it with your clear steps, code and image examples. Even though it’s not available in IE, your fallback steps seem easy enough. Thanks.

Great article, Drew. No Bagpuss mentions, though? ;-)

One word of warning though – using rgba on a wide scale can cause some real issues in some browsers when you try to scroll/resize a page.

I’ve noticed it on this site – using Firefox 3 on Win XP (I’m at work!) – where I click and drag the scroll bar and there is a very noticable lag between when I let go and when the browser catches up and renders the page at that point. It seems very sluggish, and this is not a low-powered PC. By contrast, if I disable the style sheet and try scrolling up and down, it is zippy as hell. Switch back, problem returns. Try doing the above with the Task Manager > Performance tab and you’ll see the difference in CPU usage as it tries to render the rgba CSS page as you scroll compared to the non-CSS version.

However, trying the same in Firefox 3.5/Mac OSX it’s perfectly OK. So, be sure to check in other browsers, as you may have issues that you were not previously aware of.

FWIW, I’ve started to use rgba on small discrete pieces of the site at work, but working for a corporate and with high IE6 usage (100% IE6 usage inside company), means that’s about as far as I could take it for now.

I love this. I have used it in May of this year for a nav menu on http://mulhallok.com and I got the exact effect I wanted, but of course I didn’t know how to get it working in IE, so it doesn’t look as impressive.

That is awesome!
But I guess you’re using the same principle as before…
: )

Nice article and great examples of transparency. I love this time of year.

Just to make you all aware, I’m having the exact same issue as @Malarkey regarding RGBA fallback and IE7:

http://24ways.org/2009/working-with-rgba-colour#c003155

Still looking for a solution. FFS.

Thanks guys this really opened my eyes to a new way of thinking about page layout and design. Man does that make it sound like I’ve been doing this for a while, about 6 months since I first started learning. I would love to make use of this and your other insights on my site design.

Great work Drew! Simple, to the point and informative.

Merry Christmas.

First time I’ve stumbled upon this blog, looks great! Thanks for the informative walkthrough…

In response to Andy Clarke’s comments about IE rendering default colors when faced with rgba, I just figured out a work around. Hopefully someone else hasn’t posted it yet; then I’d feel silly!

Basically, in my global link rule (a, a:link, a:visited { yadda }) I had a default color of #fff, and an rgba value right after of (255,255,255,0.8). However, in IE7, it would jump back to purple. Not exactly what I was going for.

Anyway – all I had to do was duplicate the line, so I had two selectors for a, a:link, a:visited { } sitting on top of each other. In the first one, I put the regular hex color – #fff. The second one, I put the rgba. And like magic it worked without choking!

Oh ie, you cheeky bastard you.

I’ve spend several hours today at this blog for learning CSS3. Learning new things with every post. Thanks again for the great tutorials.

Great article. Clearly described how to implement RGBA and also gave some good examples of uses to make life easier.

Overall i think this is a promising future, but premature to getting excited about just yet. Unless you really want to take the time to write out IE conditional styles, i think it’s better to put this one on that backburner for a while.
With that said, I still greatly appreciate the article…

Thank you for this! It was super helpful and easy to understand! I can’t wait to use it on my next layout.

24ways is back. Now I’ll have to start staying up until midnight again every night to read it as soon as it ‘comes out’.

@Dave Sparks: Don’t bring me into the argument (no wait… you did). From working with RGBa on the recent CannyBill project (and others), I found that IE7 would choke on the rgba properties.

It would apply the first RGB values, then choke when it read the RGBA values. Because it understood the second color property (but not values) it would revert to browser default. Hex values on the other hand seemed to be fine.

Of course I could be wrong (as I usually only give IE a minute or two) and there are much cleverer people here who deal with IE much more regularly than I do (poor souls).

Great start to “your” new year.

I’ve been using RGBA in my design and work for the last 6 month or so, and am loving it!

I wanted to test out various failover techniques for IE, here’s the results of my tests (the PNGs failover example in this article results in the PNGs being downloaded in Webkit browsers).

http://925html.com/code/rgba-ie-failover/

It’s really good to see 24ways back!

This is a nice article on RGBA Colours!

Looking forward to the rest of the months articles now!

Great article to start off with. I’m just starting to adopt the new features of CSS3 and will definitely be using rgba in projects to come. Looking forward to more tips to come.

sure rgba() is cool – but why is the alpha channel given in a 0 to 1 value? why it isnt 8-bit too like in all other 24+8 bit RGBA color spaces?

I understand that it depends on the already specified type “alphavalue” – but why not using a more common notation instead?

and of course – why not allow 32 bit hex values? what is so wrong for FF000080 for 50% red?

Wow… 24ways are back! That’s great. RGBA is nice but it’s so hard to change the mind of some designers and clients.

Hi

Great article

Wondering why the opacity doesn’t work on your site in the latest version of Opera on the Mac?

Cheers

Leveret

Great article – and a welcome return for 24ways. I’ve been meaning to give RGBA a workout ever since reading Dan Cederholm’s latest book, and this might just be the kick up the backside I need!

I won’t be giving IE users any hacky workarounds, though. Quite apart from the extra unnecessary effort, we’ve got to stop giving users excuses to stick with IE6. Sorry, but if you’re using IE6, you don’t get the full set of effects supported by modern browsers, even if it’s technically possible by jumping through flaming hoops.

We need to keep pushing the message that not every website can, should, or does look the same for every visitor.

This is awesome! Thanks for the write-up. :)

This is a great article, Css3 looks like a lot of fun, however in a world with Internet Explorer commercial designs suffer from the inability of the browser to properly render the sites.

This is a great start, and I can’t wait to see what else the month has in store for us.

I’ve fixed things up a bit in IE8.

Thanks for the great post with all the good examples!

Unfortunately, it looks like the PNG fallback makes a request to the server and downloads the PNG, even when the style is overwritten later in the stylesheet. So the payload is the same even for browsers that support RGBA.

In that case, it’s probably better to use IE conditional comments (unfortunately). Or even using CSS filters (_h1 to target IE6, *h1 to target IE7, etc).

That’s a confirmed Google Chrome bug, Derek. Other webkit-based browsers are fine.

I’m confident the Chrome team will get to the bottom of it soon.