Wie mache ich einen CSS3 oder PHP Farbverlauf (aktiv, "animiert")?

Hallo,

folgendes Problem habe ich:

Ich möchte eine Website erstellen und diese sollte einen Farbverlauf darstellen:
Ich habe in einer Style-Datei eine Farbe definiert für Tabellenhintergründe / etc. und diese möchte ich während der Laufzeit kontinuierlich ändern, sodass ohne zutun des Users die ganze Zeit diese Farbe wechselt. (Meinentwegen kann ich auch mehrere Style-Dateien erstellen, die abwechselnd geladen werden.. hauptsache das funktioniert irgendwie).

Da ich weder in PHP noch in CSS viel Ahnung habe bräuchte ich Hilfe wie ich das am geschicktesten Lösen kann.

Danke schon einmal für die Antworten :)

Renate K.O.2012-02-09T04:26:12Z

Beste Antwort

PHP ist dafür definitiv ungeeignet, weil Farbänderungen nur durch das Aktualisieren der Seite möglich sind. CSS bietet meines Wissens auch nichts an, womit du dein Problem lösen kannst. Aber mit JavaScript sollte es gehen.

Alternativ bietet sich an, eine animierte GIF-Datei zu erstellen. Sie braucht nur ein paar Pixel groß zu sein (z.B. ein Quadrat von 10 x 10 Pixeln) und besteht nur aus den Hintergrundfarben. Wenn du ca. 30 Bilder mit ähnlichen Farben zur Animation zusammenfügst, kriegst du schöne Farbverläufe hin.

Die Elemente bzw. Tabellen, die du "einfärben" willst, enhalten im Stylesheet dann:
    background-image: url(ani.gif);
    background-repeat: repeat;

Das schöne an dieser Lösung ist: Du kommst ganz ohne JavaScript aus und die Darstellung dürfte in allen Browsern gleich sein.

Zur Erstellung der Bilddateien kannst du den GIF-Animator von Microsoft nehmen. Er ist Freeware.

Anonym2012-02-09T13:02:18Z

Entschuldigung, dass ich nicht direkt auf die Frage antworte, aber als Betrachter von Webseiten würde es mich extrem stören, wenn der Hintergrund ständig die Farben wechselt. Da wird wohl kaum ein Betrachter lange mitmachen....

Nur so als Tipp

Lucius T Fowler2012-02-09T12:15:53Z

Geht auch jquery? Falls ja, dann hab' ich vielleicht was für dich:
http://xoxco.com/projects/code/rainbow/#

Du kannst dich davon ja inspirieren lassen. Mit Javascript und CSS-Eigenschaften lässt sich da auf jeden Fall was basteln.