Tutorialwelt.de » Farbverlauf Hintergrund http://www.tutorialwelt.de Tutorials aus der IT-Welt Sat, 22 May 2010 13:24:43 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 CSS Tutorial mit Video – Hintergrund für Internet Seite erstellen http://www.tutorialwelt.de/514/css-tutorial-mit-video-hintergrund-fur-internet-seite-erstellen.htm http://www.tutorialwelt.de/514/css-tutorial-mit-video-hintergrund-fur-internet-seite-erstellen.htm#comments Wed, 27 Jan 2010 11:00:17 +0000 admin http://www.tutorialwelt.de/?p=514 bgpatterns.com www.tartanmaker.com www.stripegenerator.com gradient-maker.com Letzteres ist eine Seite mit der man Farbverläufe generieren kann. Dazu später mehr. Ein Bild, daß man mit den ersten drei Seiten generiert und heruntergealden hat kann man mit folgendem Code in den Hintergrund der eigenen Seite einbinden.... Related posts:
  1. Webdesign Tutorial – Farbverlauf für den Hintergrund einer Webseite erstellen Es gibt verschiedene Möglichkeiten einen Farbverlauf für den Hintergrund seiner...
  2. CSS – Tutorial – die Hintergrundfarbe per CSS ändern Heute möchte ich Ihnen zeigen, wie Sie per CSS die...
  3. HTML Tutorial mit Video – Der Quirks Modus und margin auto im Internet Explorer Wer schon einmal versucht hat, im Internet Explorer Divs per...
Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]> CSS Tutorial – Hintergrund für Internet Seite erstellen

Hier können Sie das Video in voller Größe ansehen

Um einen Hintergrund für eine Webseite zu erstellen kann man verschiedene kostenlose Internet-Dienste nutzen:

Diese Seiten kann ich empfehlen:
bgpatterns.com
www.tartanmaker.com
www.stripegenerator.com
gradient-maker.com

Letzteres ist eine Seite mit der man Farbverläufe generieren kann. Dazu später mehr.

Ein Bild, daß man mit den ersten drei Seiten generiert und heruntergealden hat kann man mit folgendem Code in den Hintergrund der eigenen Seite einbinden:

Beispielcode HTML:

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

Verwendet man den letzten Link zur Erstellung eines Farbverlaufes muss man noch ein repeat-x in das CSS mit einfügen:

Beispielcode HTML:

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

Damit man einen sauberen Übergang zu der eigentlichen Hintergrundfarbe bekommt sollte man noch den unteren Farbwert des Farbverlaufes in den Background mit einfügen:

Beispielcode HTML:

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

Hier habe ich die Farbe weiss gewählt.

Wenn man repat-y eingibt, wird das Hintergrund-Bild vertikal wiederholt.

Beispielcode HTML:

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

repeat-x und repeat-y kann man nicht miteinander kombinieren. Vesuchen Sie es aus. Sie werden keinen Hintergrund zu sehen bekommen.

Beispielcode HTML:

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

Related posts:

  1. Webdesign Tutorial – Farbverlauf für den Hintergrund einer Webseite erstellen Es gibt verschiedene Möglichkeiten einen Farbverlauf für den Hintergrund seiner...
  2. CSS – Tutorial – die Hintergrundfarbe per CSS ändern Heute möchte ich Ihnen zeigen, wie Sie per CSS die...
  3. HTML Tutorial mit Video – Der Quirks Modus und margin auto im Internet Explorer Wer schon einmal versucht hat, im Internet Explorer Divs per...

Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

]]> http://www.tutorialwelt.de/514/css-tutorial-mit-video-hintergrund-fur-internet-seite-erstellen.htm/feed 0 Webdesign Tutorial – Farbverlauf für den Hintergrund einer Webseite erstellen http://www.tutorialwelt.de/509/webdesign-tutorial-farbverlauf-fur-den-hintergrund-einer-webseite-erstellen.htm http://www.tutorialwelt.de/509/webdesign-tutorial-farbverlauf-fur-den-hintergrund-einer-webseite-erstellen.htm#comments Mon, 25 Jan 2010 07:22:39 +0000 admin http://www.tutorialwelt.de/?p=509
  • Webdesign – Karierte Hintergründe für Ihre Webseite Heute möchte ich eine weitere Webseite vorstellen, mit der man...
  • CSS Tutorial mit Video – Hintergrund für Internet Seite erstellen Um einen Hintergrund für eine Webseite zu erstellen kann man...
  • Webdesign – Hintergrundmuster für Ihre Webseite (Retro Look) Heute möchte ich Ihnen eine weitere Webseite vorstellen, auf der...
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     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.

    Related posts:

    1. Webdesign – Karierte Hintergründe für Ihre Webseite Heute möchte ich eine weitere Webseite vorstellen, mit der man...
    2. CSS Tutorial mit Video – Hintergrund für Internet Seite erstellen Um einen Hintergrund für eine Webseite zu erstellen kann man...
    3. Webdesign – Hintergrundmuster für Ihre Webseite (Retro Look) Heute möchte ich Ihnen eine weitere Webseite vorstellen, auf der...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/509/webdesign-tutorial-farbverlauf-fur-den-hintergrund-einer-webseite-erstellen.htm/feed 0