Tutorial: Farbverläufe als Hintergrund
Farbverläufe als Seitenhintergrund sind schick und machen was her. Ich möchte im folgenden mal ein wenig darauf eingehen welche Möglichkeiten ich bislang eingesetzt habe.
Als erstes sei gesagt, dass Farbverläufe oder sonstige Hintergrundbilder überwiegend nur bei Webseiten mit einer fixen Breite einsetzbar sind (weil ja auch nur da Platz für derartiges Geschnörkel ist). Eine Grundsatzdiskussion zum Thema fixe oder variable Breite möchte hier nicht auslösen. Ich kann mit beiden Techniken arbeiten und denke, dass beide Varianten ihre Daseinsberechtigung haben.
Wenn ich mit Farbverläufen arbeite unterscheide ich generell zwischen zwei Methoden:
Methode A - an den Header angepasster Farbverlauf
Webseiten die einen großen Seitenheader enthalten, also einen Bereich am Kopf der Seite, dem eine fixe Höhe zugewiesen wurde, kann man mit einfachen Mitteln einen Farbverlauf verpassen. Als Beispiel für diese Technik eignet sich die Seite frozencherry.de sehr gut, die sich nebenbei bemerkt schon seit sehr langer Zeit in meiner Liste der optischen Leckerbissen aufhält.
Dort kann man sehr schön erkennen, dass der Farbverlauf im Hintergrund nur bis zum Ende des Seitenkopfes reicht. In dem Bereich, wo Inhalte mit variabler Höhe, in diesem Falle Fließtext, wird ein einfarbiger Hintergrund verwendet.
So kann man sich dann einfach einen 1 Pixel breiten und x Pixel hohen (je nach Länge des Verlaufs) erstellen und diesen horizontal kacheln. In dem Beispiel von frozencherry würde das beispielsweise so aussehen:
-
body {
-
background: #a2c1d9 url(‘images/fc_gradient.gif’) repeat-x;
-
}
Der Farbwert #a2c1d9 bestimmt in diesem Fall die Farbe die unter dem Verlauf liegt und somit auf dem Rest der Seite angezeigt wird.
Die Vorteile dieser Methode liegen auf der Hand: es ist leicht umzusetzen und man kommt mit nur einem sehr kleinen Image aus. Was aber wenn man einen gedrehten Farbverlauf (kann man nicht kacheln) haben möchte, oder nur einen kleinen Seitenkopf hat und man den Farbverlauf bis über den Fließtext legen will?
Methode B - frei gestaltbarer Farbverlauf
Als Beispiel soll nun diese Seite hier herhalten. Als ich damals das erste Layout erstellte hatte ich zwei Designelemente, die, wie sich später bei der Umsetzung herausstellte, nicht so recht zusammenpassten. Der Farbverlauf und die Schattierungen der Seitenränder. Im Gegensatz zum Farbverlauf, der ja nur im oberen Teil der Seite vorkommen soll, sollen die Schattierungen auf der Y-Achse gekachelt werden. Es mussten also zwei Images erstellt werden: der Farbverlauf und die Schattierungen. Beide Images wurden so angelegt dass sie bis zu einer Bildschirmbreite von 1600 Pixeln angezeigt werden können.
Eingebaut wurde das ganze dann wie folgt:
Schritt 1 - das Markup
Das Markup für die ganze Geschichte hält sich in Grenzen. Im Gegensatz zu ersten Methode ist lediglich ein weiteres div-Tag notwendig:
-
<body>
-
<div id=“body”>
-
<div id=“header”>
-
<h1>gradient tutorial</h1>
-
</div>
-
<ul id=“mainnav”>
-
<li>Home</li>
-
<li>About</li>
-
<li>Gallery</li>
-
<li>and so on</li>
-
</ul>
-
<div id=“content”>
-
content goes here
-
</div>
-
</div>
-
</body>
Schritt 2 - Die Seitenschattierungen
Das Image für die Seitenschattierungen wird einfach dem Body-Tag zugwiesen, zentriert und vertikal gekachelt.
-
body {
-
margin: 0; padding: 0;
-
background: url(‘images/bg.jpg’) top center repeat;
-
}
Schritt 3 - Der Farbverlauf
über das gekachelte Hintergrundimage wird nun der Farbverlauf gelegt. Der Verlauf wird dem äußersten Div-Tag mit der ID Body zugewiesen. Das Image muss zentriert ausgerichtet werden und darf sich nicht wiederholen (no-repeat):
-
#body {
-
background: url(‘images/bg-gradient.jpg’) top center no-repeat;
-
}
Schritt 4 - weitere Elemente stylen
Nun noch Header und Navigation die gewünschten CSS Anweisungen verpassen und fertig ist das Grundgerüst. Hier das gesamte Stylesheet:
-
body {
-
margin: 0; padding: 0;
-
background: url(‘images/bg.jpg’) top center repeat;
-
}
-
#body {
-
background: url(‘images/bg-gradient.jpg’) top center no-repeat;
-
}
-
#header {
-
width: 750px;
-
height: 150px;
-
margin: 0 auto;
-
background: url(‘images/bg-topborder.jpg’) top center no-repeat #880c0c;
-
}
-
h1 {
-
margin: 0;
-
padding-top: 80px;
-
padding-left: 20px;
-
color: #fff;
-
}
-
#mainnav {
-
list-style: none;
-
width: 750px;
-
margin: 0 auto 20px auto;
-
padding: 0;
-
background: url(‘images/bg-navbar.gif’) repeat-x;
-
}
-
#mainnav li {
-
display: inline;
-
padding: 8px 0 8px 20px;
-
}
-
#content {
-
width: 750px;
-
margin: 0 auto;
-
}
-
#content * {
-
margin-left: 20px;
-
margin-right: 20px;
-
}
Im großen und ganzen bevorzuge ich eigentlich Methode A, da diese Methode keine übergroßen Images erfordert und auch mit schlankerem Code auskommt. Allerdings wollte ich bei marcelfahle.com nicht auf einen schicken Verlauf verzichten und mich auch nicht nur auf den kleinen 150 Pixel hohen Headerbereich beschränken.
Es gibt mit Sicherheit noch zahlreiche weitere Methoden Farbverläufe und Schatten mit schlankem Code zu realisieren, jedoch habe ich mit den beiden oben besprochenen Varianten schon einige Projekte realisiert. Falls jemand noch elegantere Lösungen parat hat, würde ich mich über einen Link freuen. 
Das Beispiel von oben habe ich übrigens als Download bereitgestellt.
