Behind the curtain: preparing an interface for themes with rgba goodness

This is a peak under the hood of an ongoing project.

Encouraged by the widespread enthusiasm regarding CSS3 and its adoption across all browsers and platforms we encountered during this year's fronteers conference, we decided to especially put rgba to work for us. The following screenshot shows different color versions of the same part of the interface. However, all that was changed is the background-colour – the elements comprising the interface are layered on top and use varying opacity values on their black or white backgrounds.

The resulting interface will always have a pretty harmonious colour scheme and is adaptable with the change of just a single value: the overall background-colour (or -image). The fallback solution for browsers lacking rgba support will of course have to be carefully tweaked so it still delivers a satisfying experience without all effects.

We'll talk more about CSS3 and its massive advantages in a follow-up post as the project speeds by the next milestones.

Update 12.04.2011: The approach can work really well, but in our case there were too many subtly different display elements to make it work flawlessly. In the end we backtracked from using rgba transparency and rather turned out two finely tuned skins that don't require workarounds for older, challenged browsers. The customer didn't have much use for the broad palette of different skins we had envisioned, either.

That being said, I'm still looking forward to a project where this might be put to more efficient use.