Vorlage:Gradient

Aus PokéWiki
Zur Navigation springen Zur Suche springen
Diese Dokumentation ist eingebunden von hier.

Einfacher Gebrauch

Diese Vorlage fügt einen GradientenWikipedia-Icon 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) radial
{{Gradient|vertikal}} {{Gradient|horizontal}} {{Gradient|diagonala}} {{Gradient|diagonalb}} {{Gradient|kreis}}

Farben

{{Gradient|horizontal|00FF00|0000FF}}
{{Gradient|kreis|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 9+ 9+
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.

Weitere Beispiele:

{{Gradient|horizontal|FF0000|FF0000|#00FFFF 17%|#00FF00 33%|#FF00FF 50%|#0000FF 67%|#FFFF00 83%}}
{{Gradient|kreis|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|linear|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.

Flexibler Kreisradius

Man kann den Radius eines Kreises mit Pixel- und Prozent-Angaben einstellen. Dafür muss einfach ein color-stop, der dieselbe Farbe wie die Endfarbe besitzt, eingefügt werden:

{{Gradient|kreis|FFF|000|#000 50%}} {{Gradient|kreis|FFF|000|#000 30px}}

Genau andersherum geht es auch mit dem Innenradius:

{{Gradient|kreis|FFF|000|#FFF 50%}} {{Gradient|kreis|FFF|000|#FFF 30px}}

Für Konqueror und die älteren Versionen von Safari und Chrome muss immer der äußere Radius {{{radius_außen}}} in Pixeln (aber ohne px) festgelegt werden, dieser sollte dann ungefähr dem Radius in anderen Browsern entsprechen (Standardwert ist 100).

Angepasste Kreisgröße

Die Größe eines Kreises kann an die Größe des Hintergrundes angepasst werden. Dabei gibt es folgende Möglichkeiten:

  • cover/farthest-corner (Standard): Endfarbe wird in dem Eckpunkt, der vom Startpunkt am weitesten entfernt ist, erreicht
  • farthest-side: Endfarbe wird an dem Rand, der vom Startpunkt am weitesten entfernt ist, erreicht
  • closest-corner: Endfarbe wird in dem Eckpunkt, der am nächsten zum Startpunkt ist, erreicht
  • contain/closest-side: Endfarbe wird an dem Rand, der am nächsten zum Startpunkt ist, erreicht

Das sieht dann so aus:

cover farthest-side closest-corner contain
{{Gradient|kreis|größe=cover}}
{{Gradient|kreis|größe=farthest-side}}
{{Gradient|kreis|größe=closest-corner}}
{{Gradient|kreis|größe=contain}}

Diese Effekte ändern sich natürlich je nach Abstand des Kreismittelpunkts zum Rand und zu Ecken.

Flexible radiale Form: Ellipse

Anstatt eines Kreises kann auch eine Ellipse erzeugt werden, dafür muss einfach als erster Parameter ellipse statt kreis übergeben werden. Eine Ellipse kann jedoch in Konqueror, Safari und älteren Versionen von Chrome nicht dargestellt werden, stattdessen wird ein Kreis angezeigt. Die Größe kann wie beim Kreis mit cover, contain, closest-corner oder farthest-side eingestellt werden.

Beispiel:

{{Gradient|ellipse|größe=contain}}

repeating-linear-gradient

Der repeating-linear-gradient ist ein linear-gradient, der sich bis zum Ende des Bereiches wiederholt. Das heißt, man gibt keinen Endwert an, sondern nur pixel- oder Prozent-Angaben bis zu einem bestimmten Punkt, ab da wiederholt sich das Muster:

{{Gradient|horizontal|000000|000000|#FFFFFF 5%|#000000 10%}}
{{Gradient|repeating-horizontal|#000000 0%|#FFFFFF 5%|#000000 10%}}

Der einzige Unterschied zwischen den beiden Bildern ist das Einfügen von repeating und das Weglassen eines Endwerts, alle anderen Angaben sind gleich geblieben. Gibt man als Orte der color-stops z.B. 0%-5%-10% an, wird automatisch an der Stelle des letzten Werts (10%) wieder mit dem Einfügen der Werte (0%-5%-10%, aber diesmal an der Stelle 10%-15%-20%) begonnen, bis 20% erreicht wurden, dann fängt es wieder bei 0% an und füllt den Bereich von 20% bis 30%, bis schließlich der ganze Bereich gefüllt ist.