CSS Verläufe

So wie man den Hintergrund eines Elements in CSS als Vollfarbe deklarieren kann, kann man ihn auch als Verlauf deklarieren. Die Verwendung von CSS-definierten Verläufen anstelle von tatsächlichen Bilddateien ist besser für die Kontrolle und Leistung.

Verläufe sind typischerweise eine Farbe, die in eine andere übergeht, aber in CSS kann man jeden Aspekt davon steuern, von der Richtung über die Farben (so viele wie man möchte) bis hin zu den Stellen, an denen diese Farbänderungen stattfinden. Gehen wir das alles durch.

Verläufe sind background-image

Während für die Deklaration einer Vollfarbe die `background-color`-Eigenschaft in CSS verwendet wird, verwenden Verläufe `background-image`. Dies erweist sich aus mehreren Gründen als nützlich, auf die wir später eingehen werden. Die Kurzschreibweise `background` kennt Ihre Absicht, wenn Sie das eine oder andere deklarieren.

.gradient {

  /* can be treated like a fallback */
  background-color: red;

  /* will be "on top", if browser supports it */
  background-image: linear-gradient(red, orange);

  /* these will reset other properties, like background-position, but it does know what you mean */
  background: red;
  background: linear-gradient(red, orange);

}

Linearer Verlauf

Vielleicht der gebräuchlichste und nützlichste Verläfstyp ist `linear-gradient()`. Die „Achse“ des Verlaufs kann von links nach rechts, von oben nach unten oder in jedem beliebigen Winkel verlaufen.

Wenn kein Winkel angegeben wird, wird von oben nach unten angenommen.

Die durch Kommas getrennten Farben können jede Art von Farbe sein, die Sie normalerweise verwenden: Hex, benannte Farben, rgba, hsla usw.

Um ihn von links nach rechts zu gestalten, übergibt man einen zusätzlichen Parameter am Anfang der `linear-gradient()`-Funktion, der mit dem Wort „to“ beginnt und die Richtung angibt, z. B. „to right“.

Diese „to“-Syntax funktioniert auch für Ecken. Wenn Sie beispielsweise möchten, dass die Achse des Verlaufs in der unteren linken Ecke beginnt und zur oberen rechten Ecke verläuft, könnten Sie „to top right“ sagen.

Wenn diese Box quadratisch wäre, wäre der Winkel dieses Verlaufs 45°, aber da sie es nicht ist, ist er es nicht. Wenn Sie sicherstellen wollten, dass es 45° sind, könnten Sie das deklarieren.

.gradient {
  background-image:
    linear-gradient(
      45deg, 
      red, #f06d06
    );
}

Sie sind auch nicht auf nur zwei Farben beschränkt. Tatsächlich können Sie so viele komma-getrennte Farben haben, wie Sie möchten. Hier sind vier.

.gradient {
  background-image:
    linear-gradient(
      to right, 
      red, 
      #f06d06, 
      rgb(255, 255, 0), 
      green
    );
}

Sie können auch angeben, wo eine bestimmte Farbe „beginnen“ soll. Das nennt man „Farb-Stops“. Sagen wir, Sie möchten, dass Gelb den größten Teil des Platzes einnimmt, aber Rot nur ein wenig am Anfang, dann könnten Sie den Gelb-Farb-Stop ziemlich früh machen.

Wir denken normalerweise an Verläufe als verblassende Farben, aber wenn Sie zwei Farb-Stops haben, die gleich sind, können Sie eine Vollfarbe sofort in eine andere Vollfarbe ändern. Dies kann nützlich sein, um einen Hintergrund in voller Höhe zu deklarieren, der Spalten simuliert.

Browserunterstützung / Präfixe

Bisher haben wir uns nur die neue Syntax angesehen, aber CSS-Verläufe gibt es schon seit einiger Zeit. Die Browserunterstützung ist gut. Wo es knifflig wird, sind Syntax und Präfixe. Es gibt drei verschiedene Syntaxen, die von Browsern unterstützt wurden. Dies sind nicht ihre offiziellen Namen, aber Sie können sie sich so vorstellen:

1. Alt: Ursprüngliche WebKit-eigene Methode, mit Dingen wie from() und color-stop()
2. Zwischen: Altes Winkelsystem, z. B. „left“
3. Neu: Neues Winkelsystem, z. B. „to right“

Und dann noch Präfixe.

Versuchen wir eine Tabelle.

Chrome	1-9: Alt, mit Präfix 10-25: Zwischen, mit Präfix 26: Neu, ohne Präfix
Safari	3-: Keine Unterstützung 4-5.0: Alt, mit Präfix 5.1-6.0: Zwischen, mit Präfix 6.1: Neu, ohne Präfix
Firefox	3.5-: Keine Unterstützung 3.6-15: Zwischen, mit Präfix 16: Neu, ohne Präfix
Opera	11.0-: Keine Unterstützung 11.1-11.5: Zwischen, mit Präfix, nur linear 11.6-12: Zwischen, mit Präfix, hinzugefügt radial 12.1: Zwischen, ohne Präfix 15: Neu, ohne Präfix
IE	8-: Keine Unterstützung 9: Nur Filter 10+: Neu, ohne Präfix (unterstützt auch Zwischen mit Präfix)
Android	2.0-: Keine Unterstützung 2.1-3.0: Zwischen, mit Präfix 4.0-4.3: Neu, mit Präfix 4.4+: Neu, ohne Präfix
iOS	3-: Keine Unterstützung 3.2-4.3: Zwischen, mit Präfix 5.0-6.1: Neu, mit Präfix 7.0: Neu, ohne Präfix

Es gibt einige Überschneidungen. Wenn ein Browser die neue Syntax unterstützt, unterstützt er wahrscheinlich auch die älteren Syntaxen, einschließlich des Präfixes. Best Practice ist: Wenn er die neue Syntax unterstützt, verwenden Sie die neue.

Wenn Sie also die absolut tiefstmögliche Browserunterstützung wünschen, könnte ein linearer Verlauf so aussehen:

.gradient {
  
  /* Fallback (could use .jpg/.png alternatively) */
  background-color: red;

  /* SVG fallback for IE 9 (could be data URI, or could use filter) */
  background-image: url(fallback-gradient.svg); 

  /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
  background-image:
    -webkit-gradient(linear, left top, right top, from(red), to(#f06d06));
  
  /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
  background-image:
    -webkit-linear-gradient(left, red, #f06d06);

  /* Firefox 3.6 - 15 */
  background-image:
    -moz-linear-gradient(left, red, #f06d06);

  /* Opera 11.1 - 12 */
  background-image:
    -o-linear-gradient(left, red, #f06d06);

  /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image:
    linear-gradient(to right, red, #f06d06);

}

Das ist eine Menge Code. Das von Hand zu machen wäre fehleranfällig und viel Arbeit. Autoprefixer leistet gute Arbeit dabei und ermöglicht es Ihnen, die Menge an Code zu reduzieren, wenn Sie entscheiden, welche Browser Sie unterstützen möchten.

Das Compass Mixin kann SVG-Daten-URIs für IE 9 erstellen, falls Ihnen das wichtig ist.

Um die Sache nur *ein wenig* komplizierter zu machen, funktionieren die Grade in der ALTEN vs. NEUEN Syntax ein wenig anders. Die ALTE (und ZWISCHEN - meist mit Präfix) Methode definiert 0 Grad als von links nach rechts und verläuft gegen den Uhrzeigersinn, während die NEUE (meist ohne Präfix) Methode 0 Grad als von unten nach oben definiert und im Uhrzeigersinn verläuft.

ALT (oder ZWISCHEN) = (450 – neu) % 360

oder sogar einfacher

NEU = 90 – ALT
ALT = 90 – NEU

wie

ALT linear-gradient(135deg, rot, blau)
NEU linear-gradient(315deg, rot, blau)

IE-Filter

Internet Explorer (IE) 6-9 unterstützt zwar nicht die CSS-Gradienten-Syntax, bietet aber eine programmatische Möglichkeit, Hintergrundverläufe zu erstellen.

/* "Invalid", but works in 6-8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);

/* Valid, works in 8-9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";

Es gibt einige Überlegungen, ob man dies verwenden sollte oder nicht.

1. `filter` wird generell als schlechte Praxis für die Leistung angesehen,
2. `background-image` überschreibt `filter`, also wenn Sie dies als Fallback verwenden müssen, fallen Filter weg. Wenn eine Vollfarbe ein akzeptabler Fallback ist (`background-color`), ist Filter eine Möglichkeit.

Auch wenn Filter nur mit Hex-Werten funktionieren, können Sie immer noch Alpha-Transparenz erhalten, indem Sie dem Hex-Wert die Transparenzhöhe von 00 (0 %) bis FF (100 %) voranstellen. Beispiel:

rgba(92,47,90,1) == #FF5C2F5A
rgba(92,47,90,0) == #005C2F5A

Radiale Verläufe

Radiale Verläufe unterscheiden sich von linearen dadurch, dass sie an einem einzelnen Punkt beginnen und sich nach außen ausbreiten. Verläufe werden oft verwendet, um Beleuchtung zu simulieren, die, wie wir wissen, nicht immer gerade ist, daher können sie nützlich sein, um einem Verlauf eine natürlichere Wirkung zu verleihen.

Standardmäßig beginnt die erste Farbe in der Mitte des Elements (center center) und verblasst zur Endfarbe hin zum Rand des Elements. Das Verblassen geschieht mit gleicher Geschwindigkeit, unabhängig von der Richtung.

Man sieht, wie dieser Verlauf eine elliptische Form bildet, da das Element nicht quadratisch ist. Das ist der Standard (ellipse, als erster Parameter), aber wenn wir sagen, dass wir einen Kreis wollen, können wir ihn dazu zwingen.

.gradient {
  background-image:
    radial-gradient(
      circle,
      yellow,
      #f06d06
    );
}

Beachten Sie, dass der Verlauf kreisförmig ist, aber nur bis zur Endfarbe entlang des weitesten Randes verblasst. Wenn wir möchten, dass der Kreis vollständig innerhalb des Elements liegt, können wir dies sicherstellen, indem wir angeben, dass der Verlauf durch „closest-side“ als durch Leerzeichen getrennter Wert von der Form enden soll, z. B.:

Die möglichen Werte sind: `closest-corner`, `closest-side`, `farthest-corner`, `farthest-side`. Man kann sich das so vorstellen: „Ich möchte, dass dieser radiale Verlauf vom Mittelpunkt zum __________, verblasst, und überall sonst füllt sich, um das zu ermöglichen.“

Ein radialer Verlauf muss nicht standardmäßig in der Mitte beginnen. Sie können einen bestimmten Punkt angeben, indem Sie „at ______“ als Teil des ersten Parameters verwenden, z. B.:

Ich mache es hier deutlicher, indem ich das Beispiel quadratisch mache und einen Farb-Stop anpasse.

Die Browserunterstützung für radiale Verläufe ist weitgehend dieselbe wie für `linear-gradient()`, mit der Ausnahme einer sehr alten Version von Opera, gerade als sie begannen, Verläufe zu unterstützen, unterstützten sie nur lineare und keine radialen.

Aber ähnlich wie bei linearen Verläufen hat `radial-gradient()` einige Syntaxänderungen durchlaufen. Es gibt wieder: „Alt“, „Zwischen“ und „Neu“.

/* Example of Old */
background-image: 
  -webkit-gradient(radial, center center, 0, center center, 141, from(black), to(white), color-stop(25%, blue), color-stop(40%, green), color-stop(60%, red), color-stop(80%, purple));

/* Example of Tweener */
background-image: 
  -webkit-radial-gradient(45px 45px, farthest-corner, #F00 0%, #00F 100%) repeat scroll 0% 0% rgba(0, 0, 0, 0);

/* Example of New */
background-image: 
  radial-gradient(circle farthest-side at right, #00F, #FFF);

Die Kennzeichen sind:

• Alt: Mit `-webkit-` vorangestellt, Dinge wie `from()` und `color-stop()`
• Zwischen: Der erste Parameter war der Ort des Zentrums. Dies wird nun in Browsern, die die neue Syntax ohne Präfix unterstützen, völlig fehlschlagen, stellen Sie also sicher, dass jede Zwischen-Syntax mit einem Präfix versehen ist.
• Neu: Ausführlicher erster Parameter, wie „circle closest-corner at top right“

Auch hier würde ich Autoprefixer dies regeln lassen. Sie schreiben in der neuesten Syntax, er erstellt Fallbacks. Radiale Verläufe sind schwieriger zu durchschauen als lineare, daher würde ich empfehlen, sich einfach mit der neuesten Syntax vertraut zu machen und damit fortzufahren (und wenn nötig, zu vergessen, was Sie über ältere Syntaxen wissen).

Konische Verläufe

Ein konischer Verlauf ist einem radialen Verlauf ähnlich. Beide sind kreisförmig und verwenden die Mitte des Elements als Quellpunkt für Farb-Stops. Während sich die Farb-Stops eines radialen Verlaufs jedoch von der Mitte des Kreises ausbreiten, platziert ein konischer Verlauf sie um den Kreis herum.

Sie werden „konisch“ genannt, weil sie wie die Form eines von oben betrachteten Kegels aussehen. Zumindest wenn ein deutlicher Winkel angegeben ist und der Kontrast zwischen den Farb-Werten groß genug ist, um einen Unterschied zu erkennen.

Die Syntax für konische Verläufe ist auf Englisch leichter zu verstehen:

Erstellen Sie einen konischen Verlauf, der sich an [einem bestimmten Punkt] befindet, der mit [einer Farbe] bei einem bestimmten Winkel beginnt und mit [einer anderen Farbe] bei [einem bestimmten Winkel] endet.

Auf seiner grundlegendsten Ebene sieht es so aus:

.conic-gradient {
  background: conic-gradient(#fff, #000);
}

...wobei angenommen wird, dass der Verlauf in der Mitte des Elements beginnt (50% 50%) und gleichmäßig zwischen weißen und schwarzen Farbwerten verteilt ist.

Wir hätten dies auf verschiedene andere Arten schreiben können, die alle gültig sind:

.conic-gradient {
  /* Original example */
  background-image: conic-gradient(#fff, #000);
  /* Explicitly state the location center point */
  background: conic-gradient(at 50% 50%, #fff, #000);
  /* Explicitly state the angle of the start color */
  background: conic-gradient(from 0deg, #fff, #000);
  /* Explicitly state the angle of the start color and center point location */
  background: conic-gradient(from 0deg at center, #fff, #000);
  /* Explicitly state the angles of both colors as percentages instead of degrees */
  background: conic-gradient(#fff 0%, #000 100%);
  /* Explicitly state the angle of the starting color in degrees and the ending color by a full turn of the circle */
  background: conic-gradient(#fff 0deg, #000 1turn);
}

Wenn wir für die Farben keinen Winkel angeben, wird angenommen, dass der Verlauf gleichmäßig zwischen den Farben aufgeteilt wird, beginnend bei 0deg und endend bei 360deg. Das erzeugt eine harte Grenze, bei der die Farben bei 0deg und 360deg direkt aufeinander stoßen. Wenn unsere Startfarbe irgendwo anders im Kreis beginnen würde, sagen wir ein Viertel des Weges bei 90deg, dann erzeugt das einen glatteren Verlauf und wir bekommen diese coole, kegelartige Perspektive.

.conic-gradient {
  background: conic-gradient(from 90deg, #fff, #000);
}

Mit konischen Verläufen können wir Spaß haben. Zum Beispiel können wir damit die gleiche Art von Muster erstellen, die man vielleicht in einem Farbwähler oder dem berüchtigten sich drehenden Apple-Ball-Indikator sieht.

.conic-gradient {
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

Oder versuchen wir ein einfaches Tortendiagramm, indem wir harte Stopps zwischen drei Farb-Werten hinzufügen.

.conic-gradient {
  background: conic-gradient(lime 40%, yellow 0 70%, red 0);
}

Leider gibt es zum Zeitpunkt der Erstellung dieses Dokuments keine Browserunterstützung für `conic-gradient`. Es ist derzeit Teil der Spezifikation CSS Image and Replaced Content Module Level 4, die sich noch im Arbeitsentwurf befindet. In der Zwischenzeit stellt Lea Verou (die zur Spezifikation beigetragen hat) einen Polyfill zur Verfügung, der sie ermöglicht.

Wiederholende Verläufe

Mit *geringfügig* weniger Browserunterstützung gibt es wiederholende Verläufe. Sie sind sowohl in linearen als auch in radialen Varianten verfügbar.

Es gibt einen Trick mit nicht wiederholenden Verläufen, um den Verlauf so zu erstellen, dass er, wenn er ein kleines, winziges Rechteck wäre, mit anderen kleinen, winzigen Rechteckversionen von sich selbst übereinstimmen würde, um ein wiederholendes Muster zu erzeugen. Im Wesentlichen erstellt man diesen Verlauf und setzt `background-size`, um dieses kleine, winzige Rechteck zu erstellen. Das machte es einfach, Streifen zu erzeugen, die man dann drehen oder was auch immer konnte.

Mit `repeating-linear-gradient()` muss man diesen Trick nicht anwenden. Die Größe des Verlaufs wird durch den letzten Farb-Stop bestimmt. Wenn dieser bei 20px liegt, ist die Größe des Verlaufs (der sich dann wiederholt) ein 20px mal 20px Quadrat.

Dasselbe gilt für radial.

Fehlerhaftes Laden von Fallbacks

Wie wir bereits besprochen haben, unterstützen einige sehr alte Browser keine CSS-Gradienten-Syntax. Wenn Sie einen Fallback benötigen, der immer noch ein Verlauf ist, kann ein Bild (.jpg / .png) helfen. Das Beängstigende daran ist, dass einige etwas weniger alte Browser, die gerade erst begannen, CSS-Verläufe zu unterstützen, das Fallback-Bild geladen haben. Das heißt, die HTTP-Anfrage für das Bild wurde gemacht, obwohl der CSS-Verlauf gerendert wurde.

Firefox 3.5.8 tat dies (siehe Screenshot), ebenso wie Chrome 5- und Safari 5.0.1. Siehe

Die gute Nachricht ist, dass dies kein großes Problem mehr darstellt. Die einzigen problematischen Browser waren Chrome und Safari, und Chrome tut dies seit Version 6 nicht mehr, und Safari seit Version 5.1 nicht mehr, seit über drei Jahren.

Additional Resources

• Schnappen Sie sich einen Block des CSS, der alle Präfixe/Syntaxen abdeckt, von CSS3 Please!
• Can I Use zu Verläufen
• Mozilla-Dokumentation für lineare Verläufe, wiederholende lineare Verläufe, radiale Verläufe und wiederholende lineare Verläufe.
• Galerie von Verläufen (man kann verrückte Muster mit Verläufen erstellen)