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.