Grundlegendes zu linearen CSS3-Verläufen

Ein Bild zu erstellen, nur um einen Farbverlauf anzuzeigen, ist unflexibel und kann schnell zu einer schlechten Praxis werden. Aber leider muss es zum jetzigen Zeitpunkt noch so sein, aber hoffentlich nicht mehr lange. Dank Firefox und Safari/Chrome können wir jetzt mit minimalem Aufwand leistungsstarke Farbverläufe erzielen. In diesem Artikel zeigen wir eine einfache Implementierung von CSS-Verläufen und wie sich diese Eigenschaft in Mozilla- und Webkit-Browsern unterscheidet.

PS: Der Originaltext dieses Artikels enthält ein Video, aber aus bekannten Gründen können wir dieses Video nicht auf YouTube ansehen. Studenten, die es sehen möchten, finden bitte eine Möglichkeit, es selbst anzusehen (bis zu 720P): http ://www.youtube.com/watch?v=9D2hyM5SSCE

Webkit

Obwohl Mozilla und Webkit im Allgemeinen die gleiche Syntax für CSS3-Eigenschaften verwenden, können sie sich leider nicht auf Farbverläufe einigen. Webkit ist der erste Browser-Kernel, der Farbverläufe unterstützt und die folgende Struktur verwendet:

/* Syntax, entnommen aus: http://webkit.org/blog/175/introducing-css-gradients/ */
-webkit-gradient(<Typ>, <Punkt> [, <Radius>]?, <Punkt> [, <Radius>]? [, <Stopp>]*)

/* In der Praxis... */
Hintergrund: -webkit-gradient(linear, 0 0, 0 100 %, from(red), to(blue));