CSS, HTML und Javascript mit {stil}

CSS Transparenz • RGBA, HSLA, Opacity

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.

Transparenz mit RGB-Angaben
background: rgb(220,160,140);
background: rgba(220,160,140,0.5);

Für IE6, IE7 und IE8 wurden noch die Volltonfarben durch die erste Angabe im Stylesheet vorgegeben. Ohne die doppelte Definition der Hintergrundfarbe hätten 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.

CSS 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 – Komponenten, die der RGB-Farbraum nicht kennt. Aber bislang unterstützen nicht alle Browser die Angabe von HSL-Farben.

Da heißt es sofort aufpassen!, denn CSS nutzt das HSL-Farbmodell, Photoshop, der Color Picker in Mac OS und viele andere Anwendungen hingegen den HSV-Farbraum. HSL und HSV sind in der Struktur ähnlich, aber die Unterschiede sind sichtbar.

Wenn also Farben in CSS nicht so aussehen wie in Photoshop, dann liegt die Diskrepanz in diesem einen Buchstaben L oder V.

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

Die erste Komponente bestimmt den Farbton (Hue), die zweite die Sättigung (Saturation) und die dritte die Helligkeit (Lightness) 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«.
HSL HUE SATURATION LIGHTNESS

  • Die großen Farbmuster haben jeweils dieselbe Helligkeit und Sättigung
  • Die Streifen unter einem Farbmuster haben dieselbe Farbe, aber unterschiedliche Helligkeit und Sättigung.

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.

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!

CSS opacity wird auf die inneliegenden Kinder vererbt, so dass die Schrift innerhalb eines Blocks mit opacity ebenfalls semitransparent wird – 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);
}