Farbverlauf als background-color

  • Hallo,

    ich erstelle zur Zeit eine Website, die über einen Banner (1003*64px) mit einem horizontalen Farbverlauf von grau (links) nach weiss (rechts) verfügt. Dieser Farbverlauf wurde in Photoshop Elements realisiert - es handelt sich also um ein <img> Element.

    Die Website möchte ich nun so designen bzw. gestalten, dass sie wiederverwendbar ist. Das heisst sie soll auch von anderen verwendet werden können, nur eben individuell angepasst z.B. duch Änderungen in einer css-Datei oder einer php-Datei, die globale Variablen enthält.

    Hierfür ist aber die Realisierung des Banner durch ein jpg-Bild ungeeignet. Da ich ständig ei neues Bild erstellen müsste, es richtig benennen müsste und in das passende Verzeichnis kopieren müsste... Gibt es vielleicht eine Möglichkeit mit HTML, CSS oder evtl. PHP einen horizontalen Farberlauf zu erzeugen z.B. als background-color für ein <td> oder <div> Element?

    PS: Eine solche Funktion habe ich zwar bei SELF-HTML schon gefunden, diese wird jedoch nur vom Internet Explorer interpretiert und ist nicht als Standard definiert. Die Lösung muss auf jeden Fall unter css-konformen Browsern funktionieren (Firefox*, Opera, Safari).

    Gruß

    Tikonteroga

  • öhm.... wenn ich des richtig verstehe...

    mach ein image mit so nem verlauf. des muss ja eigentlich nur 1px breit sein (bei nem verlauf von unten nach oben), schalte repeat ein und legs in den hintergrund mit background-image:url(verlauf.jpg).

  • Hallo,

    danke für deine Antwort. Ich habe nach einer Lösung gesucht bei der ich kein Bild benutzen muss, so dass man die Farben des Verlaufs einfach durch Änderung zweier Parameter im Stylesheet oder in einer PHP-Datei ändern kann.

    Ich habe mal ein Bisschen nachgedacht und bin dann auf die Idee gekommen, dass ich ja mit einem PHP-Skript eine Tabelle erstellen könnte, die 256 * 64 Zellen mit einer Größe von 1*1px besitzt. Dann könnte ich den Zellen Spaltenweise einen anderen Wert für backgroundcolor zuweisen.

    Bei einem Farbverlauf von schwarz nach weiss auf einer 256 * X großen Fläche bekäme dann die

    1. Spalte die background-color:rgb(0,0,0);
    2. Spalte die background-color:rgb(1,1,1);
    ...
    256. Spalte die background-color:rgb(255,255,255);

    Ich finde diese Lösung aber ehrlich gesagt ein Bisschen dumm ...da blickt ja nachher keiner mehr durch. :roll:

    Gruß

    Tikonteroga