Dez 2011

CSS Transparenz • Transparente Elemente und Hintergründe

Das CSS Color-Modul hat sich von CSS2.1 zu CSS3 kaum geändert. CSS3 Color wurde allerdings durch den CSS-Stil opacity und den Alpha-Kanal erweitert und CSS3 übernimmt die Farbnamen aus dem SVG-Standard.

Neben dem RGB-Modell kommen neue Formate für Farben mit hinzu:

RGBA • HSL • HSLA • CMYK ( im Generated Paged Media Module )

Neben der RGB- und der HSL-Notation für CSS-Farben gibt es noch die Angabe von Farben in Form von RGBA- und HSLA-Werten. Das »A« bezeichnet eine vierte Komponente – den Alpha-Kanal, der die Transparenz einer Farbe als Dezimalwert zwischen 0 und 1 angibt. 

background: rgb(220,160,140);
background: rgba(220,160,140,0.5);

IE6, IE7 und IE8 zeigen hier Volltonfarben durch die erste Angabe im Stylesheet. Ohne die doppelte Definition der Hintergrundfarbe würden IE6, IE7 und IE8 nur einen leeren Rahmen anzeigen. Erst Internet Explorer 9 versteht RGBA- und HSLA-Angaben für Farben und interpretiert den Alpha-Kanal genauso wie Google Chrome, Firefox und Safari.

CSS3 Farben als HSL oder HSV

Farben im HSL- oder HSV-Farbraum (Farbton, Sättigung und Helligkeit) sind intuitiver als hexadezimale Farbendefinitionen oder RGB-Farben. Der HSL-Farbraum trennt Farbton, Sättigung und Helligkeit – Komponeten, die der RGB-Farbraum gar nicht kennt. Aber bislang unterstützen nicht alle Browser die Angabe von HSL- oder HSV-Farben.

color: hsl(321,42%,35%);

Die erste Komponente bestimmt den Farbton (Hue), die zweite die Sättigung (Saturation) und die dritte die Helligkeit (Lightness oder Value) der Farbe.

  • Der Farbton kann Werte zwischen 0 bis 360 annehmen,
  • die Sättigung reicht von 0 bis 100%
  • die Helligkeit reicht von 0 bis 100%, wobei 0% Schwarz und 100% Weiß erzeugen. Im HSL-Modell ist die Helligkeit 50% der »Normalwert«.
  • Farbmuster 1, 2 und 3: Farbwinkel von 60° bei gleicher Helligkeit und Sättigung
  • Farbmuster 3, 4 und 5: Gleicher Farbton, aber heller (4) und dunkler (5)

Bemerkung: Firefox wandelt HSL-Angaben direkt in RGB-Werte um, Safari stellt Farben tatsächlich im HSL-Raum dar. Die Farben werden zwar sowohl in RGB als auch in HSL gleich dargestellt, aber die HSL-Angaben können nicht als Basis für Berechnungen dienen.

Die Angabe einer CSS-Farbe als HSL-Wert wird von Google Chrome, Firefox, Opera und Safari unterstützt. Internet Explorer unterstützt HSL und HSLA ab Version 9.

CSS3 opacity: Transparenz für Hintergrundfarben und für Bilder

Der CSS-Stil opacity bestimmt die Transparenz sowohl von Farben als auch von Bildern.

FOOD!

FOOD!

CSS opacity wird auf die inneliegenden Kinder vererbt, so dass die Schrift innerhalb eines Blocks mit opacity auch wieder semitransparent werden – ein Effekt, der nicht immer erwünscht ist.

FOOD! 

<div style="position: relative;">
   <div style="position: absolute; background: white; 
               opacity: .5; filter:Alpha(Opacity=50);">
   </div>
   <div style="position: absolute;">
      <p>FOOD!</p>
   </div>
</div>

Hier hilft nur, zusätzlich zum semi-transparenten Block einen weiteren Block (ohne Hintergrund) absolut über den semi-transparenten Block zu platzieren. In den zweiten Block wird der Text gesetzt und erscheint dann opakt, also nicht durchsichtig.

IE 9 unterstützt CSS opacity, aber IE6, IE7 und IE8 nicht, bieten aber einen Ausweg über den IE-eigenen Stil filter.

div.semi {
   background: lightslategray;
   opacity: 0.5;
   filter:Alpha(Opacity=50);
}