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:
background: rgba(255, 255, 0, .5);
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!
Hi,
das ist leider wie mit vielen neuen HTML5/CSS3-Geschichten, bis es wirklich von einem Großteil der Browser unterstützt wird, bleibt es für mich eine Spielerei, die ich allenfalls auf rein privaten Seiten einsetze. Aber man muss die Entwicklung auf jeden Fall im Auge behalten, den irgendwann kann man das ganze dann auch in der Praxis wirklich einsetzen, denn sogar die IE6 wird irgendwann verschwinden… hoffe ich. ;-)
Übrigens wie immer ein sehr nützlicher Artikel, der alles wesentliche leicht verständlich auf den Punkt bringt. :-)
@Wolfgang: Vielen herzlichen Dank für deinen tollen Kommentar und deine Einschätzung zum Thema CSS3 :-) Ich sehe es genauso, man sollte die neuen Techniken unbedingt im Auge behalten.
Ich übe auch gerne an privaten Projekten und obwohl mir Design super wichtig ist ist, finde ich es auch okay, wenn eine Seite nicht in allen Browsern gleich aussieht (z.B. wenn im IE keine abgerundeten Ecken angezeigt werden).
Viele Grüße
Ellen :-)
Ich kann es auch kaum erwarten, CSS3 endlich richtig nutzen zu können. Ich bin ja ein grosser Fan von abgerundeten Ecken und transparenten Hintergründen. Wenn die CSS3-unfähigen Browser endlich aussterben, werde ich eine Menge Zeit sparen können :) Üben macht aber jetzt schon Spass, wie ihr beide ja schon gesagt habt.
@Barbara: Vielen Dank für dein CSS3-Feedback :-) Hehe, abgerundete Ecken und Transparenz mag ich auch sehr ;-) Oh ja, hoffentlich machen es die alten Browser nicht mehr lange, und alle anderen Browser werden mit der Zeit immer kompatibler, dann sparen wir uns eine Menge Zeit und Nerven ;-)
Mit CSS 3 kann man tolle Browserfunktionen aufrufen, was ja auch bedeutet, dass die Darstellung von Browser zu Browser trotz aller möglich Standards immer noch unterschiedlich sein kann. Flash bietet in dieser Hinsicht wohl das einheitlichste Bild, das man erzielen kann. Aber trotzdem ist CSS 3 eine echte Bereicherung, da der Einsatz keine Plugins mehr benötigt, quelloffen ist und schnell umsetzbar ohne den Einsatz kostenintensiver Tools ist.
Ich setze CSS 3 in der Regel schon ein. Der Browser, der es nicht versteht, stellt die netten Features nicht da, aber das immerhin noch CSS konform.