php-homepage.com

Gradient - Farbverläufe mit CSS3

Nur eine der tollen Möglichkeiten von CSS3 ist die Möglichkeit Elemente mit Farbverlauf darzustellen.
Wo man früher mit pixelbreiten Grafiken "herumtricksen" musste, um den gewünschten Effekt zu erhalten, reicht nun die Eigenschaft gradient.

Arten von Gradienten mit CSS3

Linearer Gradient:


von oben nach unten
von links nach rechts
und hier diagonal

Dann gibt es noch Varianten mit Achsen, Verläufe mit mehreren Farben,Transparenz und wiederholenden Gradienten. Syntax hierfür auf: Gradienten Übersicht
interessant auf jeden Fall:

Radialer Gradient:


Wobei der in meinen zwei unscheinbaren Designfarben nicht sonderlich spektakulär aussieht. Toll wird das dann mit mehreren Farben (hier gleich mit shape "circle":

Grundlegende Syntax ist ganz einfach:

Grundlegende Syntax von CSS3 Gradienten
Syntax css3 gradient