<gradient>

Übersicht

Der <gradient> CSS Datentyp beschreibt ein <image>, das aus einem progressiven Verlauf zwischen zwei oder mehreren Farben besteht. Ein CSS Farbverlauf ist kein <color> Wert, aber ein Bild ohne innere Maße; das bedeutet, es hat weder eine natürliche oder bevorzugte Größe, noch ein bevorzugtes Seitenverhältnis. Seine konkrete Größe passt sich dem Element an, dem es zugewiesen wurde.

Es gibt drei Arten von Farbverläufen:

  • Lineare Farbverläufe, erzeugt durch die linear-gradient() Funktion, wo die Farbe weich entlang einer imaginären Linie verläuft.
    body { 
    background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
    background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
    background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
    background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
    background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet); 
    }

  • Radiale Farbverläufe, erzeugt durch die radial-gradient() Funktion. Je weiter sich ein Punkt vom Ursprung entfernt befindet, desto weiter entfernt ist er von der Originalfarbe.
    body {
    background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent;
    background: radial-gradient(red, yellow, rgb(30, 144, 255));
    }
    

  • Wiederholende Farbverläufe, welche lineare oder radiale Farbverläufe fester Größe sind, die sich solange wiederholen bis die gesamte Box gefüllt ist.
    body {
    background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
    background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px);
    }  

Wie in allen Fällen, in denen zwischen Farben interpoliert wird, werden Farbverläufe im alpha-vormultiplizierten Farbraum berechnet. Dies verhindert unerwartete Grauschattierungen, wenn sowohl Farbe als auch Deckkraft variieren.

Spezifikationen

Spezifikation Status Kommentar
CSS Image Values and Replaced Content Module Level 3
Die Definition von '<gradient>' in dieser Spezifikation.
Anwärter Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Jeder Farbverlaufstyp hat eine unterschiedliche Kompatibilitätsmatrix. Bitte daher die individuellen Artikel lesen.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Sebastianz, fscholz, SJW
 Zuletzt aktualisiert von: Sebastianz,