CSS, HTML und Javascript mit {stil}

CSS Transparenz • RGBA, HSLA, Opacity

Transparenz für Farben, Bilder und Schrift

Transparenz oder Durchsichtigkeit kommt durch Farbangaben in RGB und HSL zustande: Beide Notationen für die Farbe von background, border und Schrift haben eine vierte Komponenten: den Alphakanal.

CSS opacity wirkt auf das vollständige Element und setzt einen Text mitsamt Hintergrundfarbe und auch Bilder halb durchsichtig.

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 Alphakanal erweitert und CSS3 übernimmt die Farbnamen aus dem SVG-Standard.

Neben dem RGB-Modell sind neue Formate für Farben hinzugekommen: RGBA • HSL • HSLA • CMYK ( im Generated Paged Media Module )

Der Alphakanal – das a in rgba oder hsla – gibt die Transparenz einer Farbe mit Werten zwischen 0 und 1 an. 0 ist vollständig transparent oder durchsichtig, 1 ist voll deckend oder opakt. Alles dazwischen ist halb deckend oder semitransparent und läßt den Hintergrund durchscheinen.

Transparenz mit RGB-Angaben
background: rgb(220,160,140);
background: rgba(220,160,140,0.5);
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) }

Transparenz ist animierbar: transition: background 1s verringert die Transparenz beim Hovern mit der Maus oder bei einem Touch durch den weichen Übergang von hsla(350,50%,50%,0.3) auf hsla(350,50%,50%,0.9).

Am Rande: Für IE8 wurden noch die Volltonfarben durch die erste Angabe (background: #BE1E3C) vorgegeben, sonst hätte IE8 nur einen leeren Rahmen gezeigt. Erst Internet Explorer 9 verstand RGBA- und HSLA-Farben und interpretierte den Alphakanal.

CSS Farben als HSL oder HSV

Farben im HSL- oder HSV-Farbraum (Farbton, Sättigung und Helligkeit) sind intuitiver als Hex- oder RGB-Farben. Der HSL-Farbraum trennt Farbe und Helligkeit – Komponenten, die der RGB-Farbraum nicht kennt.

Da heißt es sofort aufpassen!, denn CSS setzt auf das HSL-Farbmodell, Photoshop, der Color Picker in Mac OS und viele andere Anwendungen hingegen auf HSV. HSL und HSV sind sich sehr ä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-Farben trennen Farbe, Helligkeit und Sättigung

  • 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 HSL-Angaben können nicht als Basis für Berechnungen dienen.

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

Die Angabe von background (Hintergrund) und color (Rahmen- und Schriftfarbe) gilt nur für das jeweilige Element. CSS opacity bestimmt die Transparenz sowohl von Farben als auch von Bildern.

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
Hovern
.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>

Da 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.

HSL HUE SATURATION LIGHTNESS