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 zuständig für die Deckkraft – die Transparenz.
Das A in HSLA steht für den Alpha-Kanal, der für die Transparenz verantwortlich ist.
Die Angabe der Transparenz (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.
Auch hier ist bei der Schreibweise wichtig, dass bei der CSS3-Anweisung kein Leerzeichen zwischen dem A und der Klammer steht! Die Nachkommazahl für die Deckkraft, muss in englischer Schreibweise, also mit Punkt erfolgen.
Für die Hintergrundfarbe lautet die CSS3-Anweisung:
background-color: hsla( ..., ..., ..., 0.5);
Im Unterschied zu opacity, wird die Deckkraft nicht weiteren Elemente vererbt.
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 div-Elements, welches opacity zugewiesen bekommen hat, sind auch transparent.
Nehmen wir den Quellcode vom vorherigen Beispiel.
<!DOCTYPE html>
<html lang="de">
<head>
<title>Beispiel zu HSLA-Farbschema</title>
<meta charset="UTF-8">
<link href="css3-hsla-transparenz.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.
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:
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.
Weiterempfehlen • Social Bookmarks • Vielen Dank
Bitte unterstützen Sie dieses Projekt
Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).
Spenden
Sie können uns eine Spende über PayPal zukommen lassen.
Weiterempfehlungen
Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.
Bücher über Amazon
Bestellen Sie Bücher über folgende Links bei Amazon:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details
-
