CSS Farbverläufe ... Meinungen?

Das Problem bei der Verwendung von Bildern besteht darin, dass Sie in Bezug darauf, was Sie tun können, viel eingeschränkter sind. Wenn Sie einen Hintergrundfarbverlauf verwenden möchten und die Box größer ist als erwartet, wird der Farbverlauf entweder vorzeitig beendet oder es beginnt sich zu wiederholen. Beide Lösungen sind wahrscheinlich nicht das, was Sie wollen.

Sie können www.css3please.com nachsehen, wie Sie die schönen Effekte in css3 (mit Live-Beispielcode) erhalten. Für Hintergrundverläufe können Sie Folgendes verwenden:

Um es zusammenzufassen: Sie können Unterstützung für Farbverläufe über ein einzelnes SVG in jedem Browser erhalten, das CSS3-Farbverläufe unterstützt, mit Bonuspunkten für IE9-Unterstützung, Opera lange zurückliegend (erst kürzlich unterstützt - o-Präfix CSS3 Gradienten kürzlich), und es beseitigt die Probleme, die aufgrund der Unterschiede in den beiden Webkit-Syntaxen auftauchen. Die zwei Webkitsyntaxen sind nicht nur unterschiedliche Reihenfolge oder Kombination von Wörtern und Zahlen, sie sind völlig inkompatibel miteinander und es kann sehr schwierig sein, sie zu normalisieren.

Wenn Sie das SVG als Hintergrundbild aus einer Datei verwenden. Wenn Sie den zusätzlichen Schritt zum Einbetten der SVG als Datauri gehen, verlieren Sie die Unterstützung für Firefox vor 6. Alle Versionen von Firefox unterstützen die "richtige" CSS3-Gradientensyntax, so dass es in den meisten Fällen nicht allzu mühsam ist, sie einfach zu verwenden die SVG-Datauri plus -moz-CSS3.

Der wichtigste Trick ist, dass man etwas herumschrauben muss und die Interaktionen zwischen der internen Größenbestimmung von SVG lernen muss - & gt; Ansichtsfenster - & gt; CSS-Hintergrund internes Sizing / Tiling - & gt; und schließlich Modifikatoren wie Hintergrundgröße. Dies ist der Grund, warum, obwohl es ein Haken ist, Menschen vermeiden, SVG zu benutzen.

Die Sache, bei der ich nicht erfolgreich war, ist die Normalisierung zwischen wiederholten CSS3-Gradienten mit prozentualen Stopps und SVG zur gleichen Zeit (Unterstützung mit -moz-). Das Problem ist, dass egal welche Kombination von Möglichkeiten, um das gewünschte Ergebnis zu produzieren, die eine oder andere Hintergrundgröße so eingestellt werden muss, dass sie die andere bricht. Das ist ein ziemlich spezifischer Anwendungsfall.

Hier ist ein horizontaler linearer Verlauf:

Als Datauri (Abstände und Zeilenumbrüche entfernt)

Und hier ist das als CSS3

Hier ist eine Wiederholung von Diagonalstreifen SVG:

Und die Datauri

Und das CSS3 dafür, das IE9 nicht treffen wird:

... oder so ähnlich, ich habe es so oft gemangelt, dass das SVG so aussieht wie der Farbverlauf, um Firefox & lt; 6 zu verdecken, aber ich finde keinen Weg, um die beiden Regeln zu bekommen koexistieren (die Hintergrundgröße), ohne es richtig zu machen, dass ich vergessen habe, was ich ursprünglich hatte. Kann nur die Kugel beißen und Fallback, um es aus einer Datei zu ziehen (was gut funktioniert) oder eine minimale JS-Shim, damit Firefox die Datauri lädt.

Plus, was die alte Webkit-Syntax wäre ... etwas, das die Hintergrundgröße verwenden würde und immer die neue Syntax brechen würde. Viel Spaß dabei, dass beide Webkitsyntaxen gleichzeitig funktionieren, ohne dass der andere bricht.

Der Zweck der Verwendung eines Prozentsatzes hier für mich bestand darin, einen Farbverlauf zu verwenden, um große und kleine Behälter mit geeigneten Streifen zu unterstützen, während auch eine automatische Größenanpassung an Höhe oder Breite vorgenommen wurde, je nachdem, welches Element am besten geeignet ist.

Da gibt es Probleme, also ist es kein Spaziergang im Park. Es gibt einige zufällige Browserfehler, die Sie finden, wenn Sie das Kaninchenloch hinuntergehen. Wie ich hatte den wiederholten Gradienten anders eingerichtet, in SVG-Art definiert einen wiederholenden Gradienten. Hat in IE9 sehr gut funktioniert, aber anscheinend gibt es einige seltsame Probleme in WebKit, wenn sie als Datauri und prozentuale Breite eingebettet sind, die auf mehrere verschiedene Größenelemente angewendet wird. Im Grunde genommen benutzte man eine einzige gemeinsame Kopie des SVG-Farbservers für mehrere Elemente und bewirkte, dass sie auf das erste geöffnete Element skalierte und dann halb zerbrochen und halb-skaliert wurde, während andere Dinge geöffnet wurden.

Aber am Ende des Tages war es einfacher, sich mit den SVG-Problemen als den CSS3-Farbverlaufsproblemen zu befassen, wenn Sie auf denselben Browsersatz abzielen. Sie müssen sowieso SVG verwenden, um IE9 abzudecken (der ms-Filter ist Müll und funktioniert nicht mit anderen CSS3-Dingen wie dem Grenzradius, es saugt den ganzen Weg durch den Parkplatz für die Leistung).

Schrieb das meiste hier oben: Ссылка

Als Addendum, hier ist eine Beschreibung über das Erreichen von geprillten Gradienten in SVG (mehrere Gradienten von einer SVG): Ссылка .

Mein aktueller Ansatz besteht darin, den CSS3-Farbverlauf ( webkit- , moz- usw.) zu verwenden und das alte Hintergrundbild als Fallback bereitzustellen. Die Größe des Bildes ist bei aktuellen Bandbreiten kein Problem - selbst ein 200px-Farbverlauf benötigt nur etwa 200 Byte. Der Hauptteil des Overheads stammt aus der Latenz von mehreren Anfragen für die Bilder - die mit CSS eliminiert werden würden.

Der Hauptvorteil bei der Verwendung von CSS besteht darin, dass dadurch die Anzahl der Anfragen reduziert wird. Je mehr Bilder Sie auf einer Seite verwenden, desto größer sind die Gewinne.

Der Code, den ich für alle Browser-Gradienten verwende:

Sie müssen eine Höhe oder zoom: 1 angeben, um hasLayout auf das Element anzuwenden, damit dies in IE funktioniert.

Aktualisierung:

Hier ist eine LESS Mixin (CSS) -Version für alle LESS-Benutzer da draußen: