1 5085

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.

No related posts.

Author: Andreas Lang

Sphinx-Flashdesign.de

Andreas Lang hat im Alter von 12 Jahren begonnen, auf einem Atari ST 1040 STFM in Omikron und STOS Basic zu programmieren.
Spiele interessierten ihn nicht so sehr.
Die Welt der Bits und Bytes hat ihn gefangen.
Programmierertechnisch folgten auf dem ersten 486er Turbo Pascal, Visual Basic.
Mit dem ersten Internet Anschluss per 56k Modem folgten HTML, Javascript, CSS und Macromedia Flash. Die Website www.wizzquiz.de wurde geboren.
Eine Flash Online-Gaming Plattform mit Quiz Spielen, Memory, Sokoban etc.
Später entwickelte er Software unter anderem für Continentale und Siemens AG.
Seit zwei Jahrzehnten konzentriert er sich auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.

Weiter