Wie mache ich einen Hintergrund mit CSS-Farbverlauf mit flacher Farbe?

9

Ein Hintergrund wie dieser mit der gleichen Höhe von rot und gelb.

    
Jitendra Vyas 18.08.2011, 13:58
quelle

2 Antworten

12

Verwenden Sie Colorzillas Gradientengenerator , setzen Sie einfach zwei Farben an der gleichen Stelle% und Sie werden eine harte Kante zwischen den beiden Farben bekommen.

%Vor%     
jkupczak 18.08.2011, 14:03
quelle
5

Colorzillas Gradientengenerator ist ein guter Anfang, aber der Code ist meiner Meinung nach schrecklich.
Sie werden nie leicht sehen, ob die Farben richtig sind, es gibt keine Ausgabe von kurzen Hex-Codes wie #ff0 und - am wichtigsten im Vergleich zu der obigen Antwort - der W3C-Standard hat sich in to <side-or-corner> .

Wenn Sie also Ihre Frage nach einem flachen Farbverlauf mit gleicher Höhe des roten und gelben Bereichs stellen, ist dies mein bevorzugter Code:

%Vor%

Siehe Beispiel zu CodePen .

Beachten Sie auch, dass Sie in diesem Fall die veraltete Eigenschaft filter für IEs weglassen können, einfach weil keine Farbstopps enthalten sind.
Wenn Sie die genaue Höhe der Box kennen, können Sie auch mit px Werten anstelle der % Werte für die Farbstopps arbeiten.

Aktualisiert 2016-01-16: Weder -o- vendor-Präfix ist notwendig, noch -ms- (da IE 10 der erste IE ist, der Gradienten unterstützt und die W3C-Standardsyntax unterstützt) . Siehe Ссылка Aktualisiert 2016-01-27: Bevorzugen Sie Kleinbuchstaben-Farbwerte für besseres Gippen und geben Sie background-color und background-image anstelle von background . Außerdem wurde to bottom entfernt, da dies der Standardwert ist.

    
Volker E. 09.09.2014 02:49
quelle

Tags und Links