Schritt für Schritt lernen
die eigene Website zu erstellen

Jetzt das HTML-Seminar als
Video-Tutorial mit über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

Videokurs HTML + CSS + Webdesign erstellen

CSS3 HSLA-Farbschema: Farben mit Transparenz

Zu unserem im letzten Kapitel angesehenen HSL-Farbschema wird ein weiterer Wert mitgegeben. Es wird zum HSLA-Farbschema. Der vierte Wert ist für die Deckkraft – die Transparenz.

Die Angabe der Deckkraft erfolgt von 0 bis 1 wie wir es bereits von der CSS3-Anweisung opacity kennen. 1 steht für volle Deckkraft (also keine Transparenz) und 0 für keine Deckkraft, also komplett Transparent.

Das A steht für den Alpha-Kanal, der für die Transparenz verantwortlich ist.

Auch hier ist bei der Schreibweise wichtig, dass bei der CSS3-Anweisung kein Leerzeichen zwischen dem A und der Klammer ist. Und die Nachkommazahl für die Deckkraft muss in englischer Schreibweise, also mit Punkt erfolgen.

Für die Hintergrundfarbe ist die CSS3-Anweisung:

background-color: hsla( ..., ..., ..., 0.5);

Im Unterschied zu opacity wird die Deckkraft nicht weiteren Elemente vererbt.

Vergleich Deckkraft zwischen opacity und HSLA Vergleich Deckkraft zwischen opacity und HSLA

Zum Testen nehmen wir exakt die Aufgabe von opacity. Dort war der Effekt, dass alle Elemente innerhalb eines (halb)durchsichtigen Elementes die opacity geerbt haben. Sprich Texte etc. innerhalb eines divs, welches opacity zugewiesen bekommen hat, sind auch transparent.

Nehmen wir den Quellcode vom Beispiel vorher.

<!DOCTYPE html>
<html>
<head>
    <title>Beispiel zu HSLA-Farbschema</title>
    <meta charset="UTF-8" />
    <link href="css3-hsla-transparenz.css"
          type="text/css" rel="stylesheet">
</head>
<body>
 
<h1>Beispiel zu HSLA-Farbschema</h1>
 
<div id="box1" class="boxgroesse">
hier kommt der 1. Inhalt
</div>
 
<div id="box2" class="boxgroesse">
hier kommt der 2. Inhalt
</div>
 
<div id="box3" class="boxgroesse">
hier kommt der 3. Inhalt
</div>
 
</body>
</html>

Und den dazugehörigen CSS-Code

body {
    background-image: url(hg-blaetter.jpg);
}
 
.boxgroesse {
  width: 250px;
  height: 175px;
  font-size: 30pt;
  color: white;
  opacity: 0.5;
}
 
#box1 {
    background-color: red;
    position: absolute;
    top: 90px;
    left: 100px;
}
 
#box2 {
    background-color: green;
    position: absolute;
    top: 70px;
    left: 300px;
}
 
#box3 {
    background-color: blue;
    position: absolute;
    top: 210px;
    left: 200px;
}

Bei der Klasse .boxgroesse werden wir die opacity herausnehmen.

Die HSLA-Farben werden nun bei #box1 bis #box3 hinterlegt. Dabei wird allerdings die alte background-color nicht ersetzt sondern belassen. Das ist wichtig, falls die Seite mit einem älteren Browser angesehen wird, welcher die neuen CSS3-Anweisungen nicht kennt. Somit kann der alte Browser wenigstens die Farbe anzeigen, allerdings ohne den Transparenz-Effekt.

Wichtig ist, dass nach der alten Farb-Anweisung die neue kommt. Somit „überschreibt“ die neue CSS3-Anweisung die alte background-color-Anweisung und in neuen Browsern wird dann die Farbe mit Transparenz angezeigt.

#box1 {
    background-color: red;
    background-color: hsla(0, 100%, 50%, 0.5);
    position: absolute;
    top: 90px;
    left: 100px;
}

Dadurch erhalten wir nun die Hintergrundfarbe durchsichtig, die Schrift allerdings bleibt undurchsichtig.

Hintergrundfarbe rot nun mit 50% Transparenz über hsla(0,100%,50%,0.5) Hintergrundfarbe rot nun mit 50% Transparenz über hsla(0,100%,50%,0.5)

Für die restlichen Boxen werden bei den entsprechenden ID-Bereichen die hsla-Anweisungen auch mitgegeben.

  • Für grün: hsla(140, 100%, 50%, 0.5)
  • Für blau: hsla(210, 100%, 50%, 0.5)

Das fertige Ergebnis:

Ergebnis des CSS3-HSLA-Beispiels Ergebnis des CSS3-HSLA-Beispiels

Der komplette CSS3-Quellcode

body {
    background-image: url(hg-blaetter.jpg);
}
 
.boxgroesse {
    width: 250px;
    height: 175px;
    font-size: 30pt;
    color: white;
}
 
#box1 {
    background-color: red;
    background-color: hsla(0, 100%, 50%, 0.5);
    position: absolute;
    top: 90px;
    left: 100px;
}
 
#box2 {
    background-color: green;
    background-color: hsla(140, 100%, 50%, 0.5);
    position: absolute;
    top: 70px;
    left: 300px;
}
 
#box3 {
    background-color: blue;
    background-color: hsla(210, 100%, 50%, 0.5);
    position: absolute;
    top: 210px;
    left: 200px;
}

Farbangaben über RGB

Falls man RGB-Angaben bevorzugt, ist das in selber Bauart möglich. Der Aufbau der CSS3-Anweisung ist dann für die Hintergrundfarbe:

background-color: rgba(255,0,0,0.5);

Für RGB werden die Farben von 0 bis 255 angegeben.

Facebook und Google+

Sehr geehrte Nutzer/innen dieser Website! Wir würden uns freuen, wenn Sie uns durch Facebook oder Google+ unterstützen würden - sei es durch ein Like/+1 oder das Teilen dieser Seite. Allerdings legen wir Wert auf Datenschutz und möchten nicht, dass diese Netzwerke Daten von Ihnen erhalten, sollten Sie dies nicht wünschen. Deshalb sind die entsprechenden Buttons bei uns standardmäßig deaktiviert.

Durch einen Klick auf einen der unteren Buttons stimmen Sie der Nutzung/Speicherung Ihrer Daten (in uns unbekanntem Ausmaß, uns unbekannten Orten und uns unbekannter Weise) zu und erhalten Zugriff auf die Buttons. Wir bitten um Ihr Verständis und freuen uns über Ihre Unterstützung :)

eBook HTML-Seminar.de Videokurs HTML + CSS + Webdesign erstellen

Video-Tutorial: über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

© 2000-2014 Axel Pratzner • www.html-seminar.de • Stand 2.1.2014
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de