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

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

Søren

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.

Screenshot: Different colour versions of the same interface using rgba transparency

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.

Did we spark your interest?

If so, we'd love to hear from you. Don't hesitate to get in touch with us, if you have any questions or further remarks. And if you want to discuss any type of project, product, problem or idea with us, we would like to even more!

Contact