Einen radialen Farbverlauf erstellen

Analog zu den linearen Farverläufen, siehe dazu den vorherigen Beitrag als kurze Einführung, gibt es radiale Farverläufe. Die radialen Farbverläufe erzeugen ellipsen- bzw. kreisförmige Verläufe.

radialerFarbverlauf

radialer Farbverlauf

Auch hier wird der Farbverlauf wird mit dem Befehl background oder background-image und mindestens zwei Farben eingefügt. Auch hier sind mehrere Farben möglich.

radialer Farbverlauf mit 3 Farben

radialer Farbverlauf mit 3 Farben

Auch radiale Farbverläufe mit Prozentangaben sind machbar:

radialer Farbverlauf mit %-Werten

radialer Farbverlauf mit %-Werten

Der grüne Farbpunkt fängt jetzt erst bei 20% an, der gelbe sitzt bei 0% der Rest wird rot.

Richtung des radialen Farbverlaufs ändern

Standardmäßig beginnen radiale Farbverläufe in der Mitte eines Elements.  Den Mittelpunkt kann man durch Angabe einer Richtung steuern.

radialerFarbverlauf von oben

radialer Farbverlauf von oben

Nun befindet sich der Mittelpunkt oben. Den Standardwert der Ansicht erreichen wir wieder mit at center center. Auch der radiale Farbverlauf kann aus einer Ecke kommen:

radialer Farbverlauf aus der Ecke

radialer Farbverlauf aus der Ecke

Der Mittelpunkt befindet sich nun in der linken unteren Ecke.

Feiner justieren lässt sich der Farbverlauf noch mit festen Pixel-Werten und mit relativen Werten wie %- oder em-Angaben.

radialer Farbverlauf mit festem Wert

radialer Farbverlauf mit festem Wert

In diesem Fall befindet sich der Mittelpunkt des Farbverlaufs bei 200 Pixeln auf der horizontalen und bei 20 Pixeln auf der vertikalen Achse.

Der Unterschied von kreis- und ellipsenförmigen Farbverläufen

Durch die Befehle circle bzw. ellipse kann man bestimmen ob der radiale Verlauf kreis- oder ellipsenförmig wird. Der Standardwert ist ellipse wobei das nur auffällt, wenn der äußere Conainer nicht quadratisch ist.

Ellipsenförmiger Farbverlauf:

ellipsenförmiger Farbverlauf

ellipsenförmiger Farbverlauf

Kreisförmiger Farbverlauf:

kreisförmiger Farbverlauf

kreisförmiger Farbverlauf

Farbverläufe verkleinern und wiederholen

Anstatt einen Farbverlauf auf die ganze Fläche zu strecken, kann man ihn auch verkleinern:

kleiner Kreis

kleiner Kreis

Und dazu noch mit repeating-radial-gradient immer wiederholen lassen:

wiederholender Farbverlauf

wiederholender Farbverlauf

Okay, das sieht jetzt noch nicht besonders schön aus. Dennoch lassen sich mit CSS3 ganz interessante Muster erstellen. Dazu mehr in einem der nächsten Beiträge. Hier noch mal die beiden Links um sich Farbverläufe generieren zu lassen

und mit fertigen Code-Beispielen für schöne

Beachten Sie bitte auch, dass andere Browser als der Mozilla Firefox eventuell Vendor-Prefixe benötigen!