Tutorial: Farbverlauf mit CSS erstellen

Twitter Bootstrap Formulare nutzen (Tutorial)

Mit einem tollen Hintergrund sieht die eigene Website gleich viel schöner aus. Um einen Farbverlauf als Website-Hintergrund zu erstellen, wurden bisher Grafiken eingesetzt. Mit CSS 3 ist es nun aber auch möglich Farbverläufe direkt als CSS-Anweisung zu formulieren. Wie genau das funktioniert, liest du auf Catmoney.de

Bisher: Farbverlauf mit Bildern

Um einen guten Farbverlauf als Background zu verwenden, war es bisher üblich eine Grafik zu verwenden.

Dabei macht man sich zunutze, dass man Grafiken mit einem CSS-Befehl in der x- und y-Richtung wiederholen kann.

Möchte man einen Hintergrund der oben blau ist und unten in die Farbe weiß verläft, benötigt man eine Grafik mit der entsprechenden Höhe Verlaufshöhe. Die Breite spielt keine Rolle (kann 1 Pixel sein).

Beispiel – So geht’s

  • Grafik mit Farbverlauf erstellen: http://tools.dynamicdrive.com/gradient/
  • Gradient Width=5 setzen
  • Gradient Height=600 setzen
  • bei Top color gibt man 0000FF (blau) ein
  • und bei Bottom color FFFFFF für weiß
  • das Image Output format sollte PNG sein, bei horizontalen oder vertikalen Verläfen

Dann klickt man auf Get full size image und speichert das entstandene Bild mit einem Rechtsklick.

Um den Hintergrund nun bei deiner Website zu nutzen, fügst du folgende CSS-Code ein:

CSS-Code:

body { background:url(background.png) repeat-x #FFFFFF; }

Die eine Zeile enthält gleich 3 Befehle.

  1. Lade Bild (background.png) als Hintergrund
  2. Wiederhole Bild auf der x-Achse
  3. Fülle restlichen Hintergrund mit der Farbe Weiß

Neu: Farbverlauf mit CSS 3

Zwar wurden die CSS Level 3 noch nicht offiziell als Standard ausgerufen, aber viele Module werden von aktuellen Browsern bereits unterstützt. Dazu gehört die Möglichkeit Farbverläfe (Gradienten) auf der eigenen Website zu verwenden.
Dies geschieht komplett ohne Grafiken sondern nur mit CSS-Befehlen.

Die sich die Befehle doch von Browser zu Browser stark unterscheiden, nutzt man am besten einen der kostenlosen Online-Generatoren um einen eigenen CSS-Farbverlauf zu erstellen.

Hinweis: CSS-Farbverläfe sind besonders geeignet für Buttons und im allgemeinen kleine Flächen.

CSS-Code

body {
width:auto;height:600px;
background-repeat:no-repeat;
background-color:#ffffff;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#0000ff, endColorstr=#ffffff);
background-image:-moz-linear-gradient(top, #0000ff 0%, #ffffff 100%);
background-image:-webkit-linear-gradient(top, #0000ff 0%, #ffffff 100%);
background-image:-ms-linear-gradient(top, #0000ff 0%, #ffffff 100%);
background-image:linear-gradient(top, #0000ff 0%, #ffffff 100%);
background-image:-o-linear-gradient(top, #0000ff 0%, #ffffff 100%);
background-image:-webkit-gradient(linear, right top, right bottom, color-stop(0%,#0000ff), color-stop(100%,#ffffff));
}