browserübergreifende, halbtransparent-farbige Hintergründe mit CSS

Color Modul Level 3 CSS 3

halbtransparente, farbige Hintergründe mit CSS verwenden Um einfache, farbige Hintergründe durchscheinend zu gestalten, gibt es die nützliche Anweisung rgba() [ vgl. Color Modul Level 3, CSS 3 ]:  Damit kann die Opazität zur vollfarbigen Fläche um einen prozentualen Wert verringert werden. Die Anweisung rgba() ist anwendbar auf Schriftfarben und Hintergrundfarben, so dass sich z.B. auch halbtransparente Schriften über Bildern realisieren lassen.

Exkurs:

Leider werden die Werte nicht in der für Farbangaben bei CSS-Stilen gewohnten hexadezimalen Schreibweise (#FFFFFF) angegeben, sondern in der dezimalen Entsprechung. Auf diese Weise ergibt sich z.B. aus der Transformation des #hex r-Wertes (#FF) der dezimale Wert 255 und in der Anwendung auf den gesamten RGB Farbraum für Weiß (FF, FF,FF) eben 255,255,255. 
Die Anweisung background-color: #FFFFFF; ist damit äquavilent zu background-color: rgb(255,255,255);

Zurück zur Gestaltungsaufgabe einer duchscheinenden-farbigen Fläche. Leider ist rgba() nicht Cross-Browser-sicher, sie steht originär für die Browser Firefox (> Version 3). Safari und Opera (> Version 10) zur Verfügung. Um nun den Effekt auf andere Browser, die CSS 2.1 unterstützen, zu übertragen, schlägt Eric Eggert (http://yatil.de/Weblog/cross-browser-rgba) einen eleganten Weg vor.

Wie? So!

div.dergutegeist  {
    position: absolute;

    right: 100px;
    top: 50px;
    background-color: rgb(255,255,255);
    background-color: rgba(255,255,255,.8);
    background-color: transparent\9;
    filter:progid:DXImageTransform.Microsoft.gradient(
      startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF);
    zoom:1;
}

Zur Erklärung: 

  1. Zunächst wird das Element mit einer Vollfarbe ausgestattet [rgb()-Funktion].
  2. Dann wird die Eigenschaft background-color mit der rgba()-Funktion überschrieben, und naturgemäß nur von den Browsern befolgt, die rgba() unterstützen.
  3. Jetzt verstecken wir noch den vollfarbigen Hintergrund vor dem IE 8 [transparent/9].
  4. Um zur gewünschten Darstellung im IE zu kommen wenden wir nun die proprietäre Funktion des Verlauffilters an [progid:DXImageTransform.Microsoft.gradient()], wobei Startwert und Zielwert gleich sind, so dass eben kein Verlauf erzeugt wird.
  5. Damit der IE 6 dies auch alles versteht, kommt nun noch das Konzept des hasLayout zum tragen, denn erst mit der Anweisung position: absolute; erhält das div.Element aus Sicht des IE ein Layout. (Zum Konzept des hasLayout  und welche CSS-Eigenschaften Layout auf ein Element übertragen, gibt es natürlich einen aufschlussreichen deutschsprachingen Artikel: http://onhavinglayout.fwpf-webdesign.de/)

Weitere spannende Erkenntnisse, mit Anwendungsbeispielen,  zum Thema rgba() lassen sich bei W3C nachlesen: CSS Color Module Level 3

Comments are closed.

DAS SAGT DIE WELT

COMPANY CUSTOMER PACT

ein Herz für unsere KundenWir glauben an gute Kundenbeziehungen und offene Kommunikation miteinander.