Farben in CSS-Regeln

Farben in CSS-Regeln

Zielgruppe sind IT-StudentInnen und interessierte Amateure
Die Grundlagen von CSS werden vorausgesetzt, Kenntnisse von HTML oder SVG sind hilfreich.


Live RGB-Addition




Das Beispiel ist in einer eigenständigen Web-App enthalten, die hier eingebettet ist.
Mit diesem Link oder mit dem QR-Code wird die ↗ Web-App in einem eigenen Browser-Tab geladen.
Mit diesem Link wird der ↗ Quelltext geladen: Man kann ihn in einer Datei *.html am eigenen PC speichern und mit jedem Browser verwenden.
RGB

Live CSS-Beispiele


Ergebnis

CSS-Beispiel


CSS-Quelltext

/* Fixe CSS-Eigenschaften */
border-width:0.25em;
font-size:3.0em; font-weight:bold;
padding:0.4em; text-align:center;
/* Live-Auswahl mit dem Formular */
background-color:#FFF;
color:#000;
border-color:#F00;

RGB-Farben und Transparenz


Es gibt auch andere Methoden zur Codierung von Farben, die für spezielle Anwendungen verwendet werden wie z.B. → HSB zur Bildverarbeitung. Diese Methoden werden jedoch nur für das User-Interface verwendet, intern werden alle Farben mit dem RGB-System codiert.

Wenn ein Ausgabe-Medium über keine Lichtquellen verfügt, dann muss man eine andere Technik zur Darstellung verwenden:
Papier leuchtet nicht selbst, sondern wird von einer (meist weißen) Lichtquelle beleuchtet. Ein Drucker verwendet deshalb die → Subtraktion von Farben.
Dabei werden die Filter-Farbstoffe  Cyan (C),  Magenta (M) und  Gelb (Y) auf das Papier aufgetragen. Jede CMY-Farbe dient als Filter für ihre jeweilige RGB-Komplementär-Farbe.



Wenn man Farben mit CSS definiert, dann gibt man den Wert des α-Kanals nach jenen der 3 RGB-Kanäle an, z.B.
style="color:rgba(100,200,255,0.3);";
Mit dieser Definition ist das Wort 'Transparenz' formatiert, das über diesen Absatz gesetzt ist und den Text durchscheinen lässt.

Zur ↓ Codierung verwendet man das Wort rgba mit Dezimal-Zahlen oder %-Werten für die RGB-Kanäle und einer Gleitkomma-Zahl (mit Dezimal-Punkt !) für den α-Kanal.
Bei Codierung mit Hexadezimal-Zahlen kann man derzeit keinen α-Kanal angeben.

CSS-Codierung von Farben


Beispiel:
<div style="background-color:#EEE;">
VGA Schrift-Farbe
<span style="color:red;">FarbName</span>
</div>


Beispiel:
<div style="background-color:rgb(238,238,238)">
Schrift-Farbe
<span style="color:rgb(250,125,0);">
Orange
</span>
</div>


Beispiel:
<div style="background-color:#60FF30;">
Schrift-Farbe
<span style="color:#0030FF;">
blau
</span>
</div>


Beispiel:
<div style="background-color:#6F3;">
Schrift-Farbe
<span style="color:#03F;">
blau
</span>
</div>


Farben mit SVG Objekt-Grafik


Für Objektgrafik-Elemente werden teilweise eigene CSS-Eigenschaften verwendet:
stroke bezeichnet die Farbe des Strichs (Umrandung)
fill bezeichnet die Farbe der Füllung.
Jede in diesem Web verwendete ObjektGrafik ist mit CSS formatiert. Das kann man auch dem für jedes Beispiel zugänglichen Quelltext entnehmen.

Änderung von Farben mit Javascript


Ergebnis
Probieren sie verschiedene Varianten der Eingabe, z.B.
red, rgb(150,200,250), #FF6600, #3F6, ...


Vereinfachter Quelltext der Javascript-Funktion css_mit_js()
Damit wird ihre Text-Spende eingeholt. Anschließend wird der Versuch (try) unternommen, das Ergebnis zu formatieren.
function css_mit_js() {
var css = prompt('Farbe=');
var n=document.getElementById('js_demo');
try{n.style.color=css;}
catch(e) {alert("Fehler:\n"+e);}
}


Tipp: Lassen sie die 'Fehler-Konsole' ihres Browsers anzeigen. Dieses Fenster ist meist in einem Menü 'Entwickler-Funktionen (Developer...) versteckt. Löschen sie darin alle vorherigen Meldungen: Nun werden allfällige Fehler bei der CSS-Eingabe Live in der Fehler-Konsole angezeigt.

Farb-Verlauf (Gradient)


Horizontaler Gradient
Vertikaler Gradient
Radialer Gradient



<div style="background: linear-gradient(90deg,#FF0,#0F0);">
Horizontaler Gradient
</div>

<div style="background: linear-gradient(0deg,#0F0,#FF0);">
Vertikaler Gradient
</div>

<div style="background: radial-gradient(#FF0,#0F0);">
Radialer Gradient
</div>




<svg>
<defs>
<radialGradient id="grd1">
<stop offset="0%" stop-color="#FF0"/>
<stop offset="100%" stop-color="#0F0"/>
</radialGradient>
</defs>
<circle cx="0" cy="0" r="50" fill="url(#grd1)"/>
</svg>