Graphity: Farbverlauf in HTML/CSS/JavaScript möglich?

Guten morgen

Also ich habe die komplette Seite durchsuchen lassen und habe wenige brauchbare Artikel gefunden. Deswegen meine Frage:

Ist es mittlerweile möglich in HTML oder CSS oder JavaScript (mir egal) einen Farbverlauf im Hintergrund zu zeichnen? Im Moment würde ich das Problem mit einem Bild lösen, welches aber dann so in etwa eine höhe von 600 Pixel hätte und eine breite von vielleicht 100 Pixel. Was natürlich auf eine entsprechend lange Wartezeit schließen lässt. Diese Lösung gefällt mir nicht gut!
Wenn das nirgends möglich ist, wo könnte man das vorschlagen? Sowas in der Art von "background:color-gradient(box, 100, 100, 10, 10, green, black)" was einen Farbverlauf in Kastenform an der Position 100x100 mit der Größe 10 mal 10 von grün nach schwarz zeichnen würde...

Danke
   Graphity

  1. Hallo,

    Wenn das nirgends möglich ist, wo könnte man das vorschlagen? Sowas in der Art von "background:color-gradient(box, 100, 100, 10, 10, green, black)" was einen Farbverlauf in Kastenform an der Position 100x100 mit der Größe 10 mal 10 von grün nach schwarz zeichnen würde...

    Freue Dich auf SVG:

    <?xml ...?>
    <!DOCTYPE ...>
    <svg ...>

    <defs>

    <linearGradient id="lineargradient">
        <stop offset="0%" style="stop-color: #000"/>
        <stop offset="50%" style="stop-color: #00F"/>
        <stop offset="100%" style="stop-color: #FFF"/>
      </linearGradient>

    </defs>

    <rect x="200" y="100" width="600" height="300" style="fill: url(#lineargradient)"/>

    </svg>

    http://www.styleassistant.de/tips/TMs10kSVGDemo.htm

    MfG, Thomas

    1. Hallo,

      Wenn das nirgends möglich ist, wo könnte man das vorschlagen? Sowas in der Art von "background:color-gradient(box, 100, 100, 10, 10, green, black)" was einen Farbverlauf in Kastenform an der Position 100x100 mit der Größe 10 mal 10 von grün nach schwarz zeichnen würde...

      Freue Dich auf SVG:

      http://www.styleassistant.de/tips/TMs10kSVGDemo.htm

      MfG, Thomas

      *vorfreu* Aber schade daß das (noch) nicht geht. Also muß ihm beim heutigen Stand der Technik das Bild einfügen *grummel*

  2. Ahoi!

    [...] mit einem Bild lösen, welches aber dann so in etwa eine höhe von 600 Pixel hätte und eine breite von vielleicht 100 Pixel. Was natürlich auf eine entsprechend lange Wartezeit schließen lässt.

    Okay. PNG-Echtfarbenbild in 24-Bit, 100px*600px, zu sehen ist ein Gradient von oben-links-schwarz nach unten-rechts-grün: 2680 Byte.

    Dasselbe als PNG-Palettenbild in 8-Bit mit 64 Farben, Farbbänder sind etwas deutlicher zu sehen: nur 2050 Byte.

    Wenn dir das immer noch zu lange Wartezeiten verursacht, kann dir keiner mehr helfen.