Kapitel 9: Farben und Hintergründe
Vordergrundfarben (color)
Farb-Definitionen sind eigentlich unproblematisch,
wenn einige Faustregeln beachtet werden. So ist es allemal besser, wenn die Color-Angaben in Klassen vordefiniert werden. Da jedes Element, auch Formularelemente die verschiedenen Farben annehmen können, ist es wichtig, sich mit dem Farbkonzept einer Website auseinanderzusetzen. Eine ausgezeichnete Einführung zur Farbtheorie und Farbpsychologie liefert Hartmut Rudolf mit seinem Tutorial und kostengünstigen "Farbwähler".
Auch bei Bildern kann color für die Definition der Rahmenfarbe in CSS eingesetzt werden.
Bei ersetzten Elementen wie Links, Bildern und Formular-Elementen gibt es einige Regeln zu beachten die aufgrund der durchgehenden Vererbung von color eine Rolle spielen.
Die vorgegebenen Farbnamen in CSS und HTML betreffen nur "reine" Farben, die grundsätzlich aus nur zwei Farbwerten gebildet werden. (Ausnahme ist: silver und natürlich withe und black, die gemeinhin nicht als Farben gelten...). Deshalb müssen subtilere Farbtöne mit RGB- oder Hexwerten gesetzt werden.
Hintergrundfarben (background-color)
Beispiel: background-color: #ff8000; (Massangaben wie bei color)
Backgrounds reichen bekanntlich seit CSS2.1 genau bis zur äussersten Ecke des Border-Elementes und umschliessen natürlich Padding.
Der Default-Welt ist transparent, was Sinn macht. Ungesetzte Hintergrundfarben sind transparent und erlauben der gesetzten Hintergrundfarbe von Eltern-Elementen Sichtbarkeit. So scheint der Hintergrund des definierten Backgrounds durch alle Elemente hindurch, die keine Definition haben.
Mit background-color und color sind eine ganze Menge interessanter Kombinationen möglich.
Hintergrundbilder (background-image)
Beispiel: background-image: url(./img/css.gif); Ohne Anführungszeichen für Pfad- und Bildname.
Es macht Sinn, ein Hintergrundbild mit einer Hintergrund-Farbe zu verbinden. (Dies vor allem, wenn die Alphatransparenz von Hintergrund-Bildern eingesetzt wird.). Hintergrund-Bilder werden nicht vererbt.
Achtung! Für die Darstellung des Bildes im Browser braucht es unbedingt eine Breiten- und Höhenangabe (width, height)!
Hintergrundbilder: Wiederholung (background-repeat)
Beispiel: background-repeat:repeat-x; Horizontale Bildwiederholung (Kachelung) über eine Zeile hinweg.
Beispiel: background-repeat:repeat-x repeat-y; Horizontale und vertikale Kachelung, also das alte, gekachelte Background-Tag von HTML.
Zusammen mit der Positionierung lassen sich viele interessante Gestaltungseffekte erzielen.
Hintergrund-Bilder: Position (background-position)
In CSS2 und CSS2.1. bezieht sich die Background-Image-Position auf die innere Ecke des Blocks, also auf den Content-Bereich, aber nur im ungekachelten Zustand, was eine Differenz zur Background-color darstellt. Gekachelt (repeat-x/y) füllt das Background-Image den gesamten Blockbereich aus! (inklusive margin, border und padding )
Die Keywords für die Positionierung beziehen sich auf die horizontale (erste Angabe) und vertikale Position (zweite Angabe) des Bildes im Element, in dem es aufgerufen wird.
Beispiel: background-position: top right Bedeutung: Oben-rechts
Beispiel: background-position: center center; Bedeutung: Genau in der Mitte des Elementes.
Keywords, die allein stehen sind ungepaarte Keywordangaben.
Wenn nur ein Keyword verwendet wird, so gilt folgende (automatische )Positionierung:
center ergibt: center,center
top ergibt: top center oder center top
bottom ergibt: bottom center oder center bottom
right ergibt: right center oder center right
left ergibt: left center oder center left.
Prozentwerte sind noch etwas komplexer:
Bei doppelten Angaben wie background-position: 50% 50%, wird das Bild sowohl im Element, wie auch als Bild selbst zentriert.
Dies ergibt folgende Bild- und Elementpositionen (Beispiel 9-23, p. 262)
background-position:
0% 0% : Oben links im Element Erste Angabe immer horizontal, zweite Angabe immer vertikal
50% 50%: Mittig in der Mitte des Elements
100% 100%: Genau rechts unten im Element
0% 100%: Genau rechts oben im Element
100% 0%: Links unten im Element
Was alles auch logisch ist.
Genau gleich verhält es sich mit den Length-Angaben, welche seit CSS2.1 auch mit Prozentangaben vermischt werden können.
Mit Negativwerten können Bilder auch ausserhalb des Elements positioniert werden.
Zusammen mit der Positionierung, kann nun auch die Repeat-Angabe des Bildes gesteuert werden. So kann ein zentriertes Bild (Position) mit der repeat-y-Angabe in der Mitte des Elements getilt (tiled = gekachelt) werden, was wiederum interessante Effekte erlaubt.
Subtiles, abgestimmtes Vordergrund-Hindergrund-Design gehört zu den Berufsgeheimnissen guter WebdesignerInnen. Es lassen sich damit ausserordentlich schöne grafische Effekte erzeugen
Hintergrundbilder: Wasserzeicheneffekt (background-attachment)
Beispiel: background-attachment: fixed; Wasserzeicheneffekt, fixiert die Bildposition im sichtbaren Bereich.
Leider hat MS Internet-Explorer bis heute die Fixierung der Position nicht für die Anwendbarkeit in allen Elementen implementiert und man kann den Effekt nur durch einen Trick erreichen. Position fixed wäre eine Alternative zu den Frames, welche scrollende und fixe Bereiche gleichzeitig ermöglichen.
Hintergrund (shorthand: background)
Beispiel: background: #80ff00 url(bild.gif) bottom left repeat-x;
Die Reihenfolge der Angaben spielt keine Rolle.
Weiter zu Kapitel 10: Floating und Positionierung