User:ɞɞ/Farbbutton/doc

From Wikimedia Commons, the free media repository
Jump to navigation Jump to search

BearbeitenVersionenCache löschenSeiteninformation

Template:Goto heaven Template:Documentation/Dokuseite

Die Vorlage {{Farbbutton}} erzeugt einen hübschen Button in mehreren wählbaren Farben mit anklickbarem Link. Die Inspiration für diese Vorlage habe ich von der englischen Wikipedia.

Farbnamen sind: blau, grün, rot, orange, magenta, grau etc. (siehe weiter unten, wo alle Farben mit entsprechender Beschriftung vorhanden sind). Wird als Farbname ein unbekannter Wert eingegeben, so kann mit den Parameter farbevon und farbebis ein Farbbereich in einer gültigen CSS-Farbcodierung übergeben werden.

Die Vorlage {{Farbbutton}} benötigt keine weiteren Formatvorlagen, um zu funktionieren.

Verwendung[edit]

Verwendung[edit]

{{Farbbutton|text=|ctext=|fett=|fsize=|boxheight=|link=|elink=|img=|imgwidth=|farbe=|farbevon=|farbebis=|border-radius=}}

{{Farbbutton|text=Dieser Button ist magentafarben und verlinkt auf die Vorlage|link=Vorlage:Farbbutton|farbe=magenta|fett=bold}}

ergibt

Dieser Button ist magentafarben und verlinkt auf die Vorlage

Durch Angabe eines Farbnames abweichend von der Liste unten wird die Angabe von beliebigen Farbtönen ermöglicht.

{{Farbbutton|Button in Gelbtönen mit dunkelroter Schrift|farbe=x|farbevon=yellow|farbebis=orange|ctext=darkred|fsize=0.9em|boxheight=1.1em}}

ergibt

Button in Gelbtönen mit dunkelroter Schrift
{{Farbbutton|elink={{fullurl:Spezial:Alle_Seiten|namespace=10}}|text=Alle Vorlagen|farbe=x|img=Blaupfeil rund rechts auf.png|fett=1|farbevon=darkblue|farbebis=cyan}}

ergibt

Alle Vorlagen File:Blaupfeil rund rechts auf.png

Farben[edit]

Für diese Aufgabe bietet sich der HSL-Modus an. Die Sättigung bleibt bei 100%, die Helligkeit wird an den Farbton angepasst.

Farbtabelle[edit]

x
Farbangabe Gradient von Gradient bis
blau, blue
hsl(240,100%,50%) hsl(240,100%,30%)
green, grün hsl(94,100%,30%) hsl(94,100%,20%)
rot, red hsl(0,100%,50%) hsl(0,100%,30%)
magenta, violett, lila hsl(300,100%,40%) hsl(300,100%,25%)
orange hsl(40,100%,50%) hsl(40,100%,30%)
gelb, yellow hsl(60,100%,60%) hsl(60,100%,40%)
grau, gray, grey, neutral hsl(0,0%,50%) hsl(0,0%,30%)
darkgray darkgoldenrod, graugold, grau+gold, goldgrau, darkyellow, dunkelgelb, golden, goldenrod darkgray darkgoldenrod
Indigo, indigo, dunkelblau hsl(275, 100%, 25%) hsl(275, 100%, 10%)
seagreen,SeaGreen,wasser,Wasser,Meergrün,meergrün,seegrün,Seegrün hsl(146, 50%, 36%) hsl(146, 50%, 15%)
sky,Sky blue,Skyblue,skyblue,himmel,himmelblau hsl(215, 68%, 43%) hsl(215, 68%, 20%)
ngrün, nickles, ngreen, nicklesgrün hsl(120,100%,40%) #090
wikigrün,wikigreen,wgreen,wgrün hsl(153, 60%, 50%) hsl(137, 64%, 37%)
wikiblau,wikiblue,wblue,wblau hsl(216, 80%, 60%) hsl(220, 51%, 40%)
FireBrick,ziegelrot,firebrick,ziegel hsl(0, 68%, 42%) hsl(0, 68%, 15%)
Chocolate,chocolate,schoko,schokobraun hsl(25, 75%, 45%) hsl(25, 75%, 20%)
eblau, eblue, englischblau, englischblue rgb(4,156,219) rgb(0,100,205)


Farbmuster[edit]

Crimson hsl(348, 83%, 47%)

DarkSlateBlue hsl(248, 39%, 39%)

hsl(85, 100%, 35%)

DarkCyan hsl(180, 100%, 27%)

Parameter[edit]

x
Name Beschreibung Standard Status
text Beschriftung des Buttons auf geht's optional
ctext Textfarbe white optional
link Wikiseite Vorlage:Farbbutton/doc optional
elink externer Link leer optional
farbe Farbe des Buttons: blau, grün, rot, orange, magenta blau optional
farbevon CSS-Farbcode für Buttonfarbe, nur wenn Farbe kein Standardwert entspricht hsl(240,100%,40%) optional
farbebis CSS-Farbcode für Buttonfarbe hsl(240,100%,20%) optional
fett wenn fett=xxx (beliebiger Wert), wird der Text fett angezeigt leer optional
fsize Schriftgröße in px, em etc. 16px optional
border-radius Abrundung des Buttons 6px optional
boxheight Höhe des Buttons 18px optional
breite Breite des Buttons auto optional
img Icon zum Anklicken z.B. "Blaupfeil rund rechts auf.svg" leer optional
imgwidth Breite des Icons 20px optional

Code[edit]

<includeonly>

<onlyinclude><span class="newlink plainlinks {{{neu|neu}}}" style=" -webkit-box-shadow: rgba(255, 255, 255, 0.199219) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.046875) 0px 1px 2px 0px; background-color: #404; background-image: linear-gradient( {{#switch: {{{farbe|blue}}} |blau |blue = hsl(240,100%,50%) |grün |green = hsl(94,100%,30%) |gelb|yellow= hsl(60,100%,60%) |lila |violett |magenta = hsl(300,100%,40%) |orange = hsl(40,100%,50%) |rot |red = hsl(0,100%,50%) |Indigo |indigo |dunkelblau = hsl(275, 100%, 25%) |seagreen |SeaGreen |wasser|Wasser|Meergrün|meergrün|seegrün|Seegrün = hsl(146, 50%, 36%) |grau |grey|gray|gray|neutral = hsl(0,0%,50%) |sky|Sky blue|Skyblue|skyblue|himmel|himmelblau = hsl(215, 68%, 43%) |darkgray |darkgoldenrod |graugold |grau+gold |goldgrau |darkyellow |dunkelgelb|golden|goldenrod = darkgray |Chocolate |chocolate |schoko |schokobraun = hsl(25, 75%, 45%) |FireBrick|ziegelrot|firebrick|ziegel = hsl(0, 68%, 42%) |wikigrün|wikigreen|wgreen|wgrün = hsl(153, 60%, 50%) |wikiblau|wikiblue|wblue|wblau = hsl(216, 80%, 60%) |eblau|eblue|englischblau|englischblue = rgb(4,156,219) |ngrün|nickles|ngreen|nicklesgrün = hsl(120,100%,40%) |{{{farbevon|hsl(240,100%,40%)}}} }}, {{#switch: {{{farbe|blue}}} |blau |blue = hsl(240,100%,30%) |grün |green = hsl(94,100%,20%) |orange = hsl(40,100%,30%) |gelb|yellow= hsl(60,100%,40%) |lila|violett |magenta = hsl(300,100%,25%) |rot |red = hsl(0,100%,30%) |grau|grey|gray|neutral = hsl(0,0%,30%) |seagreen |SeaGreen|wasser|Wasser|Meergrün|meergrün|seegrün|Seegrün = hsl(146, 50%, 15%) |darkgray |darkgoldenrod |graugold |grau+gold |goldgrau |darkyellow |dunkelgelb|golden|goldenrod = darkgoldenrod |Chocolate|chocolate|schoko|schokobraun = hsl(25, 75%, 20%) |FireBrick|ziegelrot|firebrick|ziegel = hsl(0, 68%, 15%) |Indigo |indigo |dunkelblau = hsl(275, 100%, 10%) |sky|Sky blue|Skyblue|skyblue|himmel|himmelblau = hsl(215, 68%, 20%) |wikigrün|wikigreen|wgreen|wgrün = hsl(137, 64%, 37%) |wikiblau|wikiblue|wblue|wblau = hsl(220, 51%, 40%) |eblau|eblue|englischblau|englischblue = rgb(0,100,205) |ngrün|nickles|ngreen|nicklesgrün = #090 |{{{farbebis|hsl(240,100%,20%)}}} }}); border: 1px solid rgba(0, 0, 0, 0.0976562); border-bottom-color: rgba(0, 0, 0, 0.246094); border-radius: {{{border-radius|6px}}}; box-shadow: rgba(255, 255, 255, 0.199219) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.046875) 0px 1px 2px 0px; color: {{{ctext|white}}}; cursor: pointer; display: inline-block; text-align: center; vertical-align:middle; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: {{{fsize|16px}}}; font-style: normal; font-weight: {{#if:{{{fett|}}}|bold|normal}}; height: {{{boxheight|18px}}}; width: {{{breite|auto}}}; line-height: normal; overflow-y: visible; padding: {{{padding|9px 14px}}}; text-shadow: rgba(0, 0, 0, 0.246094) 0px -1px 0px;">{{#if:{{{elink|}}} <!-- externer Link hat Vorang --> |[{{{elink}}} <span style="color: {{{ctext|white}}};">{{{text|{{{1|externer Link}}}}}}</span>] {{#if:{{{img|}}}|[[Image:{{{img}}}|{{{imgwidth|20px}}}|link={{{elink}}}]]}} <!-- kein externer Link angegeben, auf internen Link checken --> |{{#if:{{{link|}}}<!-- interner Link vorhanden --> |[[{{{link}}}|<span style="color: {{{ctext|white}}};">{{{text|{{{1|{{{link}}}}}}}}}</span>]] {{#if:{{{img|}}}|[[Image:{{{img}}}|{{{imgwidth|20px}}}|link={{{link}}}]]}} <!-- kein Link vorhanden, verlinkt auf diese Vorlage als default --> |[[Template:Farbbutton/doc|<span style="color: {{{ctext|white}}};">{{{text|{{{1|auf geht's}}} }}}</span>]] }} }}</span></onlyinclude> </includeonly> {{bearbeiten}}{{verborgen}}

{{documentation}} __NOTOC__