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 würde 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.

transparenz
TRAN
SPAR
RENT
.demo { 
    position: relative; 
    margin: 1em auto;
}
.overlay { 
    position: absolute; 
    background: #BE1E3C; 
    background: hsla(350,50%,50%,0.3); 
    color: white; 
    border-top: 8px solid white; 
    border-bottom: 8px solid white;
    transition: background 1s;
}
.over { background: hsla(350,50%,50%,0.9) }

background: #BE1E3C; ist für IE8 und älter, background: hsla(350,50%,50%,0.3); ist die Angabe der Hintergrundfarbe als HSL mit Transparenz für die modernen Browser.

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

Die Angabe von Hintergrund- und Schriftfarben gilt nur für das jeweilige Element. Der CSS-Stil opacity bestimmt die Transparenz sowohl von Farben als auch von Bildern.

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.

tartufo
TARTUFO
Herbe Süße
.showcase { position: relative; opacity: 1; transition: opacity 1s; }
.showcase .overlay { position: absolute; }
.showcase .overbox { position: absolute;  }
.showtoggle { opacity: 0.5; }

<div class="showcase">
   <img src="tartufo.jpg" width="800" height="866" alt="tartufo">
   <div class="overlay">TARTUFO</div>
   <div class="overbox">Herbe Süße</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.

tartufo
TARTUFO
Herbe Süße
.showdouble { position: relative;  }
.singlefade {opacity: 1; transition: opacity 1s; }
.showdouble .overlay { position: absolute;  }
.showdouble .overbox { position: absolute; }
.milky { opacity: 0.5; }

<div class="showdouble">
    <div class="singlefade">
        <img src="tartufo.jpg" width="800" height="866" alt="tartufo">
    </div>
    <div class="opact">
        <div class="overlay">TARTUFO</div>
        <div class="overbox">Herbe Süße</div>
    </div>
</div>

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