Neueste Web-Entwicklung Tutorials
 

CSS Farben

❮ Zurück Weiter Kapitel ❯

CSS3 Farben

CSS unterstützt Farbnamen, hexadezimal und RGB-Farben.

Darüber hinaus führt auch CSS3:

  • RGBA Farben
  • HSL Farben
  • HSLA Farben
  • Opazität

Browser-Unterstützung

Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die vollständig CSS3-Farbwerte / Eigenschaft unterstützt.

Eigentum
RGBA, HSL, and HSLA 4.0 9.0 3.0 3.1 10.1
Opazität 4.0 9.0 2.0 3.1 10.1

RGBA Farben

RGBA - Farbwerte sind eine Erweiterung der RGB - Farbwerte mit einem alpha - Kanal - die die Opazität für eine Farbe angibt.

Rgba (rot, grün, blau,: Ein RGBA - Farbwert wird mit angegeben alpha ). Die alpha - Parameter ist eine Zahl zwischen 0.0 (vollständig transparent) und 1,0 (vollständig undurchsichtig).

rgba (255, 0, 0, 0,2);
rgba (255, 0, 0, 0,4);
rgba (255, 0, 0, 0,6);
rgba (255, 0, 0, 0,8);

Das folgende Beispiel definiert verschiedene RGBA Farben:

Beispiel

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */
Versuch es selber "

HSL Farben

HSL steht für Farbton, Sättigung und Helligkeit.

hsl (Farbton, Sättigung, Helligkeit): Ein HSL-Farbwert wird mit angegeben.

  1. Der Farbton ist ein Grad auf dem Farbrad (0-360):
    • 0 (oder 360) ist rot
    • 120 ist grün
    • 240 ist blau
  2. Die Sättigung ist ein Prozentwert: 100% die volle Farbe.
  3. Leichtigkeit ist auch ein Prozentsatz; 0% ist dunkel (schwarz) und 100% ist weiß.
hsl (0, 100%, 30%);
hsl (0, 100%, 50%);
hsl (0, 100%, 70%);
hsl (0, 100%, 90%);

Das folgende Beispiel definiert verschiedene HSL Farben:

Beispiel

#p1 {background-color: hsl(120, 100%, 50%);}  /* green */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */
Versuch es selber "

HSLA Farben

HSLA Farbwerte sind eine Erweiterung der HSL - Farbwerte mit einem alpha - Kanal - die die Opazität für eine Farbe angibt.

HSLA (Farbton, Sättigung, Helligkeit,: Ein HSLA Farbwert wird mit dem angegebenen alpha ), wobei der alpha - Parameter , um die Opazität definiert. Die alpha - Parameter ist eine Zahl zwischen 0.0 (vollständig transparent) und 1,0 (vollständig undurchsichtig).

HSLA (0, 100%, 30%, 0,3);
HSLA (0, 100%, 50%, 0,3);
HSLA (0, 100%, 70%, 0,3);
HSLA (0, 100%, 90%, 0,3);

Das folgende Beispiel definiert verschiedene HSLA Farben:

Beispiel

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */
Versuch es selber "

Opazität

Die CSS3 Opazität Eigenschaft legt die Opazität für einen bestimmten RGB-Wert.

Die Opazität Eigenschaftswert muss eine Zahl zwischen 0,0 (vollständig transparent) und 1,0 (völlig undurchsichtig).

rgb (255, 0, 0); Opazität: 0,2;
rgb (255, 0, 0); Opazität: 0,4;
rgb (255, 0, 0); Opazität: 0,6;
rgb (255, 0, 0); Opazität: 0,8;

Beachten Sie, dass der Text oben auch undurchsichtig sein.

Das folgende Beispiel zeigt unterschiedliche RGB-Werte mit einer Undurchsichtigkeit:

Beispiel

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */
Versuch es selber "

Testen Sie sich mit Übungen!

Übung 1 » Übung 2» Übung 3 » Übung 4»


❮ Zurück Weiter Kapitel ❯