CSS: Farbverlauf mit mehreren Farben
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angegebenen farben
aussehen
bild
code
dank
editor
einstellen
erkennen
experimentieren
farbe
generator
grafik
hoch geladen schau
http
kopieren
not
tool
url
verlaufen
vorlage
-
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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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 -
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. -
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 -
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. -
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 -
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. -
Das bekommt man mit
hin:radial-gradient
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
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.circle farthest-corner at 100% 100% -
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
-
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. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
