Übungsbeispiel CSS3 Transparenz

Zur Übung und Anwendung der opacity-Eigenschaft und rgba-Werten folgendes kleines Beispiel. Hättet Ihr das Ergebnis so erwartet?

WE ARE STILL HERE

ein wenig Text in einem Absatz

 
 
Ich verstehe jetzt die Forderungen nach mehr Transparenz. Oder war das in einem anderen Zusammenhang? Ich hätte zumindest etwas mehr Transparenz der Hintergrundfarbe des unteren Textes erwartet! 😀

Weiterlesen

CSS3 Farb-Transparenz mit RGBA

In meinem letzten Beitrag habe ich zur Erzeugung einer Transparenz die CSS3-Eigenschaft opacity verwendet.

Als „Nachteil“ (wenn man denn hier überhaupt von einem Nachteil sprechen kann, es ist eine Eigenschaft mit bestimmten Werten und genau das liefert sie!) der Eigenschaft opacity wird oft genannt, das die Transparenz auf alle Kindelemente vererbt wird und somit z. B. auch ein Text innerhalb eines Elementes die Eigenschaft annimmt und dadurch „unlesbar“ wird.

Der „Vorteil“ (und das muss man dann auch nennen,) ist, das man nicht nur Farben, sondern auch Bildern und Fotos Transparenz zuweisen kann.

Zur Erzeugung einer Farb-Transparenz wurde dem CSS Color-Modul in Level 3 aber auch das „A“, der Alpha-Wert im RGB Farbraum hinzugefügt.
Dieser Alpha-Wert drückt in Werten von 0.0 bis 1 die Transparenz aus.
(0.0 = völlige Transparenz, 1 = keine Transparenz)

Mein Beispiel aus dem Beitrag mit der CSS3-Eigenschaft opacity nun mit den RGBA-Angaben.

orange = RGB 255, 165, 0

Alpha-Wert: 0.1

Alpha-Wert: 0.2

Alpha-Wert: 0.3

Alpha-Wert: 0.4

Alpha-Wert: 0.5

Alpha-Wert: 0.6

Alpha-Wert: 0.7

Alpha-Wert: 0.8

Alpha-Wert: 0.9

Alpha-Wert: 1.0

Weiterlesen

CSS3 opacity – Transparenz den Elementen und Farben

Mit der opacity-Eigenschaft können wir die Transparenz eines Elementes festlegen. Mögliche Werte der Eigenschaft sind die Dezimalzahlen von 0.0 bzw. 1.0, was einer Transparenz von 100% bis 0% entspricht (opacity 0.0 = völlige Transparenz, opacity 1.0 = keine Transparenz). Die jeweilige Transparenz wird auf alle Child-Elemente vererbt. Dieses kann man anhand des folgenden Beispiels gut betrachten und verstehen, auch der Text innerhalb des DIV-Containers ist von der Transparenz betroffen.

opacity: 0.1

opacity: 0.2

opacity: 0.3

opacity: 0.4

opacity: 0.5

opacity: 0.6

opacity: 0.7

opacity: 0.8

opacity: 0.9

opacity: 1.0

 
Weiterlesen