Webdesign Tutorial – Mit gradient-maker.com einen Farbverlauf für den Hintergrund einer Webseite erstellen

Es gibt verschiedene Möglichkeiten einen Farbverlauf für den Hintergrund seiner Webseite zu erstellen.
Man kann Photoshop oder GIMP als Software verwenden. Man erstellt ein neues Dokument mit der
gewünschten Höhe und einer Breite von nur einem Pixel und wendet dort das Farbverlaufswerkzeug an.

Man kann aber auch den kostenlosen Dienst einer Webseite in Anspruch nehmen.

Auf gradient-maker.com können Sie ganz einfach einen Farbverlauf für Ihre Webseite erstellen.

Stellen Sie einfach die Höhe ein die Startfarbe und die Endfarbe. Notieren Sie sich den Wert der Endfarbe. Diesen Wert benötigen wir dann noch für unseren CSS Code.

Diesen Farbverlauf können wir ganz einfach mit folgendem CSS-Code in den Hintergrund unserer Seite integrieren:

Beispielcode HTML:

<html>
 <head>
  <style type="text/css">
   body {
                 background: #ffffff url('derdateiname.jpg') repeat-x;
   }
  </style>
 </head>
 <body>
 </body>
</html>

Beachten Sie bitte, daß #ffffff der Farbwert für den unteren Wert des Farbverlaufes sein sollte.
Das hat folgenden Grund: Man kann einen Hintergrund leider nicht beliebig strecken.
Beim Erstellen des Hintergrundes legen wir bereits fest, wie hoch der Farbverlauf sein wird.
Eine 400px hohe Farbverlaufsgrafik wird auch nur 400px des Hintergrundes an Höhe abdecken.
Da wir dann einen schönen Übergang zu der eigentlichen Hintergrundfarbe wünschen, sollte der Hintergrund mit der unteren Farbe des Verlaufes flächendeckend gefüllt werden.

In der Breite fordern wir den Browser auf, den Farbverlauf zu wiederholen. Das machen wir mit dem Zusatz repeat-x. X steht hierbei für die X-Achse eines Koordiantensystemes… also einer waagerechten Linie.

In einem anderen Tutorial werde ich nochmals genauer auf das Erstellen von Hintergründen per CSS eingehen.

Share and Enjoy: Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.