kostenloser Webspace werbefrei: lima-city


CSS: Farbverlauf mit mehreren Farben

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

    Hallo
    Ein Farbverlauf mit 2 Farben habe ich auch schon gemacht, aber ich würde gerne sowas ähnliches wie das hier: http://c143.lima-city.de/background.png per CSS machen. Es müsste nicht genau gleich sein, aber ziemlich ähnlich.
    Geht das?

    Danke und Gruss

    Edit by burgi: Link klickbar gemacht

    Beitrag zuletzt geändert: 11.1.2014 23:52:49 von burgi
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Dein Link zur Grafik geht leider nicht, darum weiß ich nicht genau was Du meinst aber vieleicht hilft Dir das ja weiter.

    background: -moz-linear-gradient(left, red, orange, yellow, green, blue);


    Ergibt einen Farbverlauf in den angegebenen Farben von links nach rechts.

    Gruß marco

    Beitrag zuletzt geändert: 11.1.2014 16:15:06 von aff3m1tw4ff3
  4. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

    aff3m1tw4ff3 schrieb:
    Dein Link zur Grafik geht leider nicht, darum weiß ich nicht genau was Du meinst aber vieleicht hilft Dir das ja weiter.

    background: -moz-linear-gradient(left, red, orange, yellow, green, blue);


    Ergibt einen Farbverlauf in den angegebenen Farben von links nach rechts.

    Gruß marco


    Doch doch, der link funktioniert. Du musst ihn nur kopieren. Sowas hab ich schon, es geht eher um den verlauf.

    background: -webkit-linear-gradient(-70deg, #6994bd, #764ca0);


    Das hab ich, aber ich häts noch gern so ründlich wie auf dem verlinkten Bild.
  5. c143 schrieb:
    Doch doch, der link funktioniert. Du musst ihn nur kopieren.

    Nein, er funktioniert nicht! http://c143.lima-city.de/background.png -> 404 Not found
  6. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

    fatfreddy schrieb:
    c143 schrieb:
    Doch doch, der link funktioniert. Du musst ihn nur kopieren.

    Nein, er funktioniert nicht! http://c143.lima-city.de/background.png -> 404 Not found


    Mein Fehler, war noch im cache. Habs jetzt wieder hoch geladen.
  7. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    Schau dir mal diesen Online-Gradient-Generator an
    http://www.colorzilla.com/gradient-editor/
    Dein Bild sieht nach einem diagonalen Farbverlauf aus, das kann man bei Orientation einstellen.
    Farben kann man hinzufügen, in dem man gleich unterhalb des Farbbalkens klickt.

    Ich nehme mir meisten eine der Vorlagen und passe sie dann an.

    Dein Verlauf könnte ungefähr so aussehen
    http://www.colorzilla.com/gradient-editor/#287ac1+0,79408c+100;Custom

    Beitrag zuletzt geändert: 11.1.2014 17:49:48 von mein-wunschname
  8. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

    mein-wunschname schrieb:
    Schau dir mal diesen Online-Gradient-Generator an
    http://www.colorzilla.com/gradient-editor/
    Dein Bild sieht nach einem diagonalen Farbverlauf aus, das kann man bei Orientation einstellen.
    Farben kann man hinzufügen, in dem man gleich unterhalb des Farbbalkens klickt.

    Ich nehme mir meisten eine der Vorlagen und passe sie dann an.

    Dein Verlauf könnte ungefähr so aussehen
    http://www.colorzilla.com/gradient-editor/#287ac1+0,79408c+100;Custom


    Ich habe doch schon solch einen Verlauf:
    background: -webkit-linear-gradient(-70deg, #6994bd, #764ca0);


    Ich hätte nur noch gerne so eine runde Krümmung wie im Bild. Ich weiss, dass man das ganz rund machen kann, aber so ähnlich wie auf dem Bild bekomm ichs nicht hin.
  9. kaetzle7

    Moderator Kostenloser Webspace von kaetzle7

    kaetzle7 hat kostenlosen Webspace.

    Das bekommt man mit
    radial-gradient
    hin:

    background: radial-gradient(circle farthest-corner at 300px 300px, rgb(153, 0, 255) 27%, rgb(51, 0, 255) 49%, rgb(175, 196, 216) 94%);


    Mit
    circle farthest-corner at 100% 100%
    kannst du die Position des Kreises in das linke untere Eck Positionieren. Das funktioniert zumindest so im Chrome - hier das Beispiel: http://kaetzle7.lima-city.de/zeugs/radial-gradient.htm.
  10. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    c143 schrieb:
    Ich hätte nur noch gerne so eine runde Krümmung wie im Bild. Ich weiss, dass man das ganz rund machen kann, aber so ähnlich wie auf dem Bild bekomm ichs nicht hin.


    Wahrscheinlich funktioniert meine Farberkennungssoftware nicht richtig. Ich kann in der Beispielgrafik keine regelmäßige Krümmung erkennen, bei mir sieht das eher wie ein unregelmäßiger Übergang aus.
    Das kann man recht gut sehen, wenn man die Farben deiner Grafik einfach mal verstärkt:
    http://mein-wunschname.12hp.de/background-neu.png
    Wenn es wirklich radial sein soll dann beitet sich dieses Tool zum experimentieren an:
    http://www.visualcsstools.com

  11. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

    mein-wunschname schrieb:
    c143 schrieb:
    Ich hätte nur noch gerne so eine runde Krümmung wie im Bild. Ich weiss, dass man das ganz rund machen kann, aber so ähnlich wie auf dem Bild bekomm ichs nicht hin.


    Wahrscheinlich funktioniert meine Farberkennungssoftware nicht richtig. Ich kann in der Beispielgrafik keine regelmäßige Krümmung erkennen, bei mir sieht das eher wie ein unregelmäßiger Übergang aus.
    Das kann man recht gut sehen, wenn man die Farben deiner Grafik einfach mal verstärkt:
    http://mein-wunschname.12hp.de/background-neu.png
    Wenn es wirklich radial sein soll dann beitet sich dieses Tool zum experimentieren an:
    http://www.visualcsstools.com



    Danke, das tool ist ziemlich cool, damit bin ich schon ein wenig näher dran gekommen.
  12. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!