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

Søren Birkemeyer  ·  18. Oktober 2010

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.

Avatar von Søren Birkemeyer

Søren Birkemeyer

Frontend Entwickler & Wiederholungstäter

2017 hat Søren zu unserer großen Freude bereits zum zweiten Mal den Weg zu uns gefunden. Nachdem er seine Ausbildung bei uns abgeschlossen und bereits mehrere Jahre als Entwickler bei uns Erfahrung gesammelt hatte, führte sein Weg ihn zunächst für einen Zwischenstopp hinaus in die weite Welt der Webbranche. Mit viel neuem Know-how im Gepäck kehrte er schließlich zur webfactory zurück und begeistert uns seitdem erneut mit seiner Expertise und seinem Engagement. Neben "Frontendisch" spricht Søren auch "Backendisch" und "Designisch" und sieht seine Rolle besonders in der Vermittlung zwischen den Bereichen. Wenn Søren mal nicht in die Tasten haut, dann hängt er gerne an Boulderwänden ab und besteigt den ein oder anderen Berg – am liebsten im hohen Norden.