03.07.2008
Webdesign mit Farbverlaufgrafiken
Webdesign ist im gewissen Sinn das Zusammenspiel von Code und Grafik. Deshalb kann es nicht schaden, wenn Webmaster auch einige Grafikkenntnisse mitbringen, oder zumindest die Bereitschaft, sich diese anzueignen. Garnet von meiner Partnerseite www.ohne-pi.gehts-gar.net hat sich spontan bereit erklärt, eine Anleitung für die nachfolgend zum Einsatz kommenden Farbverlaufgrafiken zu veröffentlichen. Dabei wurde das Grafikprogramm "PhotoImpact"
1. Die Farbverlaufgrafik als Hintergund
Im ersten Beispiel soll die hier dargestellte Grafik farbverlauf_orange.gif (ziemlich unten rechts) als Hintergrundgrafik eingebunden werden. Dies kann sowohl für den Body als auch für einen beliebigen Div erfolgen. Im Beispiel weisen wir die Grafik mit folgenden CSS-Angaben dem Body zu:
body {
background: url(farbverlauf_orange.gif);
}
Verwendete
Grafiksoftware:
Als Ergebnis erhalten wir durch die horizontale und vertikale Wiederholung der Grafik (Kachelung) einen imposanten Welleneffekt wie in Demo 1 zu sehen.
Nicht ganz so aufdringlich wirkt die Darstellung, wenn man für die Hintergrundgrafik einen größeren Höhenwert wählt wie z.B. auf www.ohne-garnet.gehts-gar.net dargestellt. Im Zusammenspiel mit farbharmonischen Rahmen lassen sich mit dieser Methode sehr hochwertig aussehende Effekte erzielen.
Verwenden wir dagegen die Grafik balken_rot.gif, ergibt sich ein viel unruhigerer Welleneffekt, wie unsere Demo 2 zeigt.
Nun, dieser Effekt ist wohl doch etwas übertrieben und sicherlich nicht jedermanns Geschmack. Eine derart schmale "Röhre" können wir dagegen für einen anderen Zweck viel besser einsetzen:
2. Farbverlaufgrafik als Balkendiagramm
Verwenden wir das balken_rot.gif doch besser für ein Balkendiagramm, mit dem ein bestimmtes Zahlenverhältnis dargestellt werden soll, z.B. die Anzahl der Homepagebesucher pro Wochentag.
Zur Realisierung bietet sich eine Tabelle an. Die Balkenbreite bestimmen wir durch den Width-Wert des Image-Tags:
<table>
<tr>
<td>Montag</td>
<td><img src="balken_rot.gif" style="margin-left: 15px; width: 200px; height: 30px;" alt="Grafik"> 200</td>
</tr>
<tr>
<td>Dienstag</td>
<td><img src="balken_rot.gif" style="margin-left: 15px; width: 180px; height: 30px;" alt="Grafik"> 180</td>
</tr>
...
<td>Sonntag</td>
<td><img src="balken_rot.gif" style="margin-left: 15px; width: 159px; height: 30px;" alt="Grafik"> 159</td>
</tr>
</table>
| Montag |  200 |
| Dienstag | 180 |
| Mittwoch | 321 |
| Donnerstag | 256 |
| Freitag | 380 |
| Samstag | 344 |
| Sonntag | 159 |
3. Röhrenüberschrift
Noch einmal die gleiche Grafik, diesmal jedoch als Hintergrund für eine Überschrift eingesetzt. Um eine vertikale Kachelung zu vermeiden, aber auch um eine vertikale Textzentrierung zu gewährleisten ist darauf zu achten, dass (bei einzeiligem Text) eine line-height verwendet wird, die der Grafikhöhe entspricht. Die Schriftgröße (hier 18px) darf die Höhe der eingesetzten Grafik (30px) nicht überschreiten.
CSS:
h3 {
background: url(balken_rot.gif);
line-height: 30px;
color: #ff0;
font-size: 18px;
test-align: center;
}
HTML:
<h3>Überschrift mit Balkenhintergrund</h3>
Ergebnis:Überschrift mit Balkenhintergrund
4. Einfacher Farbverlauf
Eine einfache Farbverlaufgrafik, die sich von einer Farbe in eine andere auflöst kann man sehr gut verwenden, um einen Übergang zweier untereinander liegender Bereiche einer Homepage zu erzielen. Im folgenden Beispiel soll der Kopfbereich einer Seite blau sein und sich dann im weiteren Verlauf nach unten in weiß auflösen. Wir verwenden hierzu die Grafik blauverlauf1.gif von unserer bereits bekannten Pixelseite (ganz unten rechts).
Die Zuweisung zum body erfolgt wie bereits bekannt mit
body {
background: url(blauverlauf1.gif);
}
Sehen wir uns das Ergebnis an, so ist das noch nicht ganz im Sinne des Erfinders: Die Grafik wiederholt sich nicht nur horizontal, sondern auch vertikal. Unser Blauton soll jedoch nur einmal im oberen Bereich bleiben und sich dann in weiß auflösen. Er darf sich folglich nur horizontal kacheln. Somit müssen wir unsere CSS-Angabe um ein background-repeat: repeat-x ergänzen oder besser in Kurzschreibweise dem background hinzufügen:
body {
background: url(blauverlauf1.gif) repeat-x;
}
Unsere korrigierte Demo ist jetzt mit dem gewünschten Effekt ausgestattet. Soll der Farbübergang nicht nach weiß, sondern in einen anderen Farbton erfolgen, ergänzt man die Backgroundangaben noch um den entsprechenden Farbcode.
Zusätzlich wurde noch ein Footer eingebaut, für den ebenfalls eine Farbverlaufgrafik eingesetzt wird, lediglich mit einer geringeren Höhe und mit einem Farbverlauf von hellblau nach dunkelblau. Damit er immer unten erscheint wurde er am unteren Body-Rand absolut positioniert. Seine CSS-Eigenschaften lauten:
#footer {
background: url(footer1.gif) repeat-x;
width: 100%;
color: #fff;
position: absolute;
bottom: 0;
font: bold 12px Verdana;
text-align: center;
line-height: 20px;
}
Tipp:
Damit die Schrift innerhalb der Footergrafik vertikal zentriert wird, verwenden wir (bei einzeiligem Text) eine line-height, die der Höhe der Footergrafik entspricht, hier 20px.