Vorlage:Gradient/doc

Einfacher Gebrauch

Diese Vorlage fügt einen Gradienten^⁠ als Hintergrund ein.

Der Quellcode unter den einzelnen Beispielen muss in eine style-Anweisung eingefügt werden, z. B. so:
{| style="{{Gradient|vertikal}}"
...
|}

Wird bei den Beispielen kein Farbübergang, sondern ein eintöniger roter Hintergrund dargestellt, kann dein Browser kein Gradient darstellen (siehe Abschnitt Browserkompatibilität).

Ausrichtungen des Farbverlaufs

vertikal	horizontal	diagonal (fallend)	diagonal (steigend)
{{Gradient|vertikal}}	{{Gradient|horizontal}}	{{Gradient|diagonala}}	{{Gradient|diagonalb}}

Farben

{{Gradient|horizontal|00FF00|0000FF}}

Browserkompatibilität

Achtung: Kann nicht in allen Browsern dargestellt werden!

Anzeigbarkeit der Gradienten abhängig von Browser und Version

Browser	linear	radial
Google Chrome	alle	3+
Internet Explorer	?	?
Konqueror	?	?
Mozilla Firefox	3.6+	3.6+
Opera	11.10+	in Planung
Safari	4+	4+

Erweiterter Gebrauch

Komplexere Farbübergänge

{{Gradient|horizontal|FF0000|FF0000|#00FF00 33%|#0000FF 67%}}

Es ist wichtig, pro Festlegung einer Farbe an einer bestimmten Stelle (color-stop) einen eigenen Parameter zu benutzen (von der Start- und Endfarbe abgesehen), dieser muss für Konqueror und ältere Versionen von Chrome und Safari umgeformt werden. Außerdem muss beachtet werden, dass die Prozentzahlen aufsteigend sortiert werden, sonst werden die color-stops ignoriert. Farbangaben wie red dürfen nicht verwendet werden, ebenso dürfen die Rauten vor den Farbangaben und die Prozentzahlen nicht weggelassen werden.

Weiteres Beispiel:

{{Gradient|horizontal|FF0000|FF0000|#00FFFF 17%|#00FF00 33%|#FF00FF 50%|#0000FF 67%|#FFFF00 83%}}

Neben Start- und Endfarbe können maximal 7 color-stops übergeben werden.

Flexible lineare Ausrichtung: Prozentangabe

{{Gradient|start=X-Start Y-Start|ende=X-Ende Y-Ende}}

Für X-Start und X-Ende (Festlegung, auf welcher Breite sich der Start-/Endpunkt befindet) kann dabei left, right, center oder eine Angabe in Prozent oder in Pixeln eingegeben werden, für Y-Start und Y-Ende (Festlegung, auf welcher Höhe sich der Start-/Endpunkt befindet) top, bottom, center oder eine Angabe in Prozent oder in Pixeln.

• start=left 50%|ende=right 50% entspricht einem horizontalen Gradienten
• start=50% top|ende=50% bottom entspricht einem vertikalen Gradienten
• start=left top|ende=right bottom entspricht einem diagonal fallenden Gradienten
• start=left bottom|ende=right top entspricht einem diagonal steigenden Gradienten

Die flexible Anpassung mit Prozentangabe funktioniert nur für Konqueror und alle Versionen von Chrome und Safari völlig. In neueren Browsern kann nur {{{start}}} übergeben werden, {{{ende}}} wird automatisch zum "Spiegelbild" (left ↔ right, top ↔ bottom, z.B. 40% ↔ 60%), in Opera kann dieser Gradient sogar überhaupt nicht angezeigt werden. Vor allem dann, wenn als {{{ende}}} nicht das "Spiegelbild" angegeben wird, kommt es also zu sehr großen Darstellungsunterschieden zwischen aktuellen Browsern, auf Prozentangaben sollte daher so weit wie möglich verzichtet werden, stattdessen sollte man versuchen, dies mit Gradangaben und ggf. color-stops zu umschreiben.

Flexible lineare Ausrichtung: Gradangabe

{{Gradient|grad=Zahldeg}}

Für die Gradzahl wurde hier 80 eingesetzt, es können aber alle Werte von -360 bis 360 eingetragen werden, dabei bewirken:

• -360/-180/0/180/360 einen horizontalen Farbverlauf
• -315/-135/45/225 einen um exakt 45° diagonal steigenden Farbverlauf, entspricht nur bei einem Quadrat {{Gradient|diagonalb}}
• -270/-90/90/270: einen vertikalen Farbverlauf
• -225/-45/135/315 einen um exakt 45° diagonal fallenden Farbverlauf, entspricht nur bei einem Quadrat {{Gradient|diagonala}}

Je nach Wert kann es passieren, dass 1. und 2. Farbe miteinander vertauscht werden.

Die flexible Anpassung mit Gradangaben funktioniert für Konqueror und ältere Versionen von Chrome und Safari nicht. Die Gradangabe kann jedoch mit diesen Parametern nicht vollständig umschrieben werden, am besten übergibt man zusätzlich zu der Gradangabe einfach etwas, was der Gradangabe nahe kommt, oder einfach die Werte für einen horizontalen Gradienten (start=left 50%|ende=right 50%). Standardmäßig wird dann die Gradangabe angezeigt, nur wenn diese nicht verarbeitet werden kann, werden die Prozentangaben verwendet.

Erweiterte radiale Ausrichtung: Ellipse

Fortsetzung folgt...