Bisher war es üblich transparente PNGs zu verwenden, um transparente Flächen oder Hintergründe darzustellen. Das bedeutet man muss mühselig die transparenten Bilder in Photoshop vorbereiten, um sie dann im CSS Style Sheet aufzurufen. Mit der praktischen CSS3-Funktion »RGBA« kannst du ganz einfach transparente Hintergrundfarben, Rahmen, Schriften und sogar Schatten erzeugen.

Uns so funktioniert’s

Anstelle des einfachen RGB-Farbwerts (rgb = red, green, blue) gibst du den RGBA-Wert an. A stellt dabei für Alpha, und gibt den Alphakanal Transparenz-Wert deiner RGB-Farbe an.

Der CSS-Code sieht so aus:

[php]
background: rgba(255, 255, 0, .5);
[/php]

Schau dir ein paar Beispiele für die CSS3 RGBA-Funktion an!

Leider unterstützen der Internet Explorer und Opera RGBA noch nicht. Als Alternative kannst du einen ähnlichen RGB-Farbwert angeben, oder ein transparentes PNG aufrufen. Mehr Infos zur Browser-Unterstützung von RGBA kannst du in Chris Coyiers Artikel »RGBa Browser Support« auf CSS-Tricks nachlesen.

Wie nützlich findest du die CSS3-Funktion RGBA? Verwendest du sie schon in deinen Projekten, oder warest du lieber bis RGBA von allen Browsern unterstützt wird? Deine Meinung zum Thema interessiert mich sehr. Schreibe mir doch einfach einen Kommentar!