1.3 Farbe und Bild

RGB vs Hexadezimal

Farben werden in CSS3 in RGB-Werten definiert. Wie etwa in Illustrator lann die Vordergrundfarbe und die Hintergrundfarbe für Objekte (Tags) definiert werden. Die entsprechende Anweisung ist rgb(r,g,b) und erwartet drei Zahlen zwischen 0 und 255, die den RGB-Farbwert definieren:


color: rgb(220,0,110);
background: rgb(50,50,50);

See the Pen Color: RGB by Andreas (@ernasad) on CodePen.

Heute können Farben in der Regel in RGB-Werten definiert werden. Daneben mussten Farben vor der Einführung des CSS3-Standards in Hexadezimalwerten angegeben werden. Mehr dazu kann man hier nachlesen.

Wie bekommt man exakte Farbwerte aus einer Layoutvorlage?

  • Aus Illustrator über das CSS-Eigenschaften-Fenster
  • Aus Photoshop über die Pipette

Transparenzen: RGBA

Farben können Transparenzkanäle hinzugefügt werden, sodass beispielsweise Obkekte halbtransparent erscheinen. Die entsprechende Anweisung heisst rgba(r, g, b, a), wobei das ›a‹ für den Alphakanal steht. Die Werte für die Deckkraft werden zwischen 0 (durchsichtig) und 1 (deckend) angegeben.


color: rgba(220,0,110, 0.5);
background: rgba(50,50,50, 0.5);

Fläche, Kontur, Objekte

background, border

Mittels der Anweisung opacity kann die Deckkraft HTML-Tags eingestellt werden. Dazu zählen nicht nur Farben, sonderen beispielsweise auch Fotos oder Schrift. Die Anweisung erwartet wie bei rgba Werte zwischen 0 (durchsichtig) und 1 (deckend).

See the Pen Color: Opacity by Andreas (@ernasad) on CodePen.

Verläufe: Gradients

See the Pen Color: Gradient by Andreas (@ernasad) on CodePen.

Einen Online-Editor für das Editieren von Verläufen findet man beispielsweise hier. Ansonsten lassen sich Verläufe gut auf bekannte Weise in Illustrator erstelln und aus dem CSS-Eignschaften Fenster kopieren.

Bitmap - images

Bilder lassen sich über den Tag img einbinden. Durch das Attribut href wird der eindeutige Pfad zur Bilddatei angegeben. Mit dem Attribut alt wird ein alternativer Text angegeben, der ausgegeben wird, wenn das Bild nicht dargestellt werden kann.


<img src="tree.gif" alt="A beautiful tree">

Wiederholung: Von Browsern unterstützte Bildformate sind: .gif, .jpg, .png, .svg.

Background-Images

Mit background-images lassen sich beispielsweise Muster oder ›Kacheln‹ in Browserfenstern realisieren. Standardmäßig werden die Bilddateien horizontal und vertikal dafür wiederholt. Dies lässt sich mit background-repeat: no-repeat; deaktivieren.


body {
    background-image: url("img_tree.png");
    /*background-repeat: no-repeat;*/
}

Background Pattern in CSS3

See the Pen Image: Background Gradients by Andreas (@ernasad) on CodePen.

Fullsize Image-Background in CSS3


html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

SVG

Video

Für diese Einführung würde das Thema Vido etwas zu weit führen. Bei Interesse kann man hier die Basics nachlesen.