Vorlage:Farbe: Unterschied zwischen den Versionen

Aus ZUM Deutsch Lernen
deutsch-lernen>Christian
KKeine Bearbeitungszusammenfassung
deutsch-lernen>Christian
KKeine Bearbeitungszusammenfassung
Zeile 39: Zeile 39:
;Helligkeitsangaben
;Helligkeitsangaben
:heller, hell, dunkel, dunkler
:heller, hell, dunkel, dunkler
== Beispiele ==


{{Box
{{Box
| Farbe mit Bedeutung
|einfach
| {{ Farbe | Frage }} <span class="zum-farbe-Frage">Text in Farbe ```Frage```</span> test
|{{#tag: pre| <nowiki>{{Farbe|Merksatz}}</nowiki>}}{{Farbe | Merksatz}}
| Experimentieren
|Experimentieren
}}
 
 
 
{{Box
|einfach
|{{#tag: pre| <nowiki>{{Farbe|komplementär|heller}}</nowiki>}}{{Farbe | komplementär|heller}}
|Experimentieren
}}
 
 
{{Box
|CSS-Klasse für Farbe mit Bedeutung
|{{#tag: pre| <nowiki><span class="zum-farbe-Merksatz">Text in Farbe ''Merksatz''</span></nowiki>}}{{#tag: span | Text in Farbe ''Merksatz'' |class = zum-farbe-Merksatz}}
|Experimentieren
}}
}}


Version vom 19. Oktober 2018, 04:57 Uhr


Die Vorlage Farbe gibt dir eine Farbe aus dem ZUM-Farbschema zurück. Bitte verwende wenn möglich Farben mit Bedeutung, da sie leichter zu pflegen sind.

Es gibt sowohl Farbnamen mit Bedeutung als auch das vollständige Farbschema. Die Vorlage verwendet bis zu 2 Parameter. Der erste Parameter ist der Farbname, der zweite kann verwendet werden um hellere oder dunklere Töne zu erhalten.

Farben mit Bedeutung sollten, wenn möglich, nicht mit Helligkeitsangaben modifiziert werden.

Farbnamen mit Bedeutung
Hervorhebung1, Frage, Lernpfad, Hervorhebung2, Merksatz, Üben, Arbeitsmethode, Unterrichtsidee, Experimentieren, Arbeitsmethode, Unterrichtsidee, Experimentieren, Meinung, Lösung, Download, Kurzinfo, Zitat
Farbnamen aus dem Farbschema
primär, sekundär-1, sekundär-2, komplementär, orange, grün, grau
Helligkeitsangaben
heller, hell, dunkel, dunkler

Beispiele

einfach 
 {{Farbe|Merksatz}}
#C64285



einfach 
 {{Farbe|komplementär|heller}}
#A592D7


CSS-Klasse für Farbe mit Bedeutung 
 <span class="zum-farbe-Merksatz">Text in Farbe ''Merksatz''</span>
Text in Farbe Merksatz


Farbtabellen

Farben mit Bedeutung

Hervorhebung1 #F1D850

{{Farbe |Hervorhebung1}}

Frage #F1D850

{{Farbe |Frage}}

Lernpfad #F1D850

{{Farbe |Lernpfad}}

Hervorhebung2 #C64285

{{Farbe |Hervorhebung2}}

Merksatz #C64285

{{Farbe |Merksatz}}

Üben #338894

{{Farbe |Üben}}

Arbeitsmethode #5E43A5

{{Farbe |Arbeitsmethode}}

Unterrichtsidee #A8DF4A

{{Farbe |Unterrichtsidee}}

Experimentieren #A8DF4A

{{Farbe |Experimentieren}}

Meinung #DBDBDB

{{Farbe |Meinung}}

Lösung #DBDBDB

{{Farbe |Lösung}}

Download #DBDBDB

{{Farbe |Download}}

Kurzinfo #DBDBDB

{{Farbe |Kurzinfo}}

Zitat #a0a0a0

{{Farbe |Zitat}}

Farbschema

primär #FFF0A2

{{Farbe |primär |heller}}

#FFEA77

{{Farbe |primär |hell}}

#F1D850

{{Farbe |primär}}

#DEC229

{{Farbe |primär |dunkel}}

#AF9612

{{Farbe |primär |dunkler}}

sekundär-1 #E994BF

{{Farbe |sekundär-1 |heller}}

#D965A0

{{Farbe |sekundär-1 |hell}}

#C64285

{{Farbe |sekundär-1}}

#B6226D

{{Farbe |sekundär-1 |dunkel}}

#900F50

{{Farbe |sekundär-1 |dunkler}}

sekundär-2 #85C5CF

{{Farbe |sekundär-2 |heller}}

#52A1AD

{{Farbe |sekundär-2 |hell}}

#338894

{{Farbe |sekundär-2}}

#1B7A88

{{Farbe |sekundär-2 |dunkel}}

#0D5F6B

{{Farbe |sekundär-2 |dunkler}}

komplementär #A592D7

{{Farbe |komplementär |heller}}

#7B63BC

{{Farbe |komplementär |hell}}

#5E43A5

{{Farbe |komplementär}}

#482998

{{Farbe |komplementär |dunkel}}

#331878

{{Farbe |komplementär |dunkler}}

orange #FFCEA2

{{Farbe |orange |heller}}

#FFB877

{{Farbe |orange |hell}}

#F19D50

{{Farbe |orange}}

#DD7F28

{{Farbe |orange |dunkel}}

#AE5D12

{{Farbe |orange |dunkler}}

grün #D4F69C

{{Farbe |grün |heller}}

#C0EF6F

{{Farbe |grün |hell}}

#A8DF4A

{{Farbe |grün}}

#8FCD25

{{Farbe |grün |dunkel}}

#6CA111

{{Farbe |grün |dunkler}}

links #0077dd

{{Farbe |links |heller}}

#0077dd

{{Farbe |links |hell}}

#0077dd

{{Farbe |links}}

#005599

{{Farbe |links |dunkel}}

#005599

{{Farbe |links |dunkler}}

grau #F1F1F1

{{Farbe |grau |heller}}

#ececec

{{Farbe |grau |hell}}

#DBDBDB

{{Farbe |grau}}

#C8C8C8

{{Farbe |grau |dunkel}}

#a0a0a0

{{Farbe |grau |dunkler}}

CSS Code for Common.css

/* Bedeutungsfarben */
.zum-farbe-Hervorhebung1   { color:#F1D850; }
.zum-farbe-Frage           { color:#F1D850; }
.zum-farbe-Lernpfad        { color:#F1D850; }
.zum-farbe-Hervorhebung2   { color:#C64285; }
.zum-farbe-Merksatz        { color:#C64285; }
.zum-farbe-Ueben           { color:#338894; }
.zum-farbe-Arbeitsmethode  { color:#5E43A5; }
.zum-farbe-Unterrichtsidee { color:#A8DF4A; }
.zum-farbe-Experimentieren { color:#A8DF4A; }
.zum-farbe-Arbeitsmethode  { color:#5E43A5; }
.zum-farbe-Unterrichtsidee { color:#A8DF4A; }
.zum-farbe-Experimentieren { color:#A8DF4A; }
.zum-farbe-Meinung         { color:#DBDBDB; }
.zum-farbe-Lösung          { color:#DBDBDB; }
.zum-farbe-Download        { color:#DBDBDB; }
.zum-farbe-Kurzinfo        { color:#DBDBDB; }
.zum-farbe-Zitat           { color:#a0a0a0; }

.zum-hintergrund-Hervorhebung1   { background-color:#F1D850; }
.zum-hintergrund-Frage           { background-color:#F1D850; }
.zum-hintergrund-Lernpfad        { background-color:#F1D850; }
.zum-hintergrund-Hervorhebung2   { background-color:#C64285; }
.zum-hintergrund-Merksatz        { background-color:#C64285; }
.zum-hintergrund-Ueben           { background-color:#338894; }
.zum-hintergrund-Arbeitsmethode  { background-color:#5E43A5; }
.zum-hintergrund-Unterrichtsidee { background-color:#A8DF4A; }
.zum-hintergrund-Experimentieren { background-color:#A8DF4A; }
.zum-hintergrund-Arbeitsmethode  { background-color:#5E43A5; }
.zum-hintergrund-Unterrichtsidee { background-color:#A8DF4A; }
.zum-hintergrund-Experimentieren { background-color:#A8DF4A; }
.zum-hintergrund-Meinung         { background-color:#DBDBDB; }
.zum-hintergrund-Lösung          { background-color:#DBDBDB; }
.zum-hintergrund-Download        { background-color:#DBDBDB; }
.zum-hintergrund-Kurzinfo        { background-color:#DBDBDB; }
.zum-hintergrund-Zitat           { background-color:#a0a0a0; }  


/* komplettes Farbschema */
.zum-farbe-primaer                           { color: #F1D850; }
.zum-farbe-primaer.zum-farbe-heller          { color: #FFF0A2; }
.zum-farbe-primaer.zum-farbe-hell            { color: #FFEA77; }
.zum-farbe-primaer.zum-farbe-dunkel          { color: #DEC229; }
.zum-farbe-primaer.zum-farbe-dunkler         { color: #AF9612; }
.zum-farbe-sekundaer-1                       { color: #F1D850; }
.zum-farbe-sekundaer-1.zum-farbe-heller      { color: #FFF0A2; }
.zum-farbe-sekundaer-1.zum-farbe-hell        { color: #FFEA77; }
.zum-farbe-sekundaer-1.zum-farbe-dunkel      { color: #DEC229; }
.zum-farbe-sekundaer-1.zum-farbe-dunkler     { color: #AF9612; }
.zum-farbe-sekundaer-2                       { color: #F1D850; }
.zum-farbe-sekundaer-2.zum-farbe-heller      { color: #FFF0A2; }
.zum-farbe-sekundaer-2.zum-farbe-hell        { color: #FFEA77; }
.zum-farbe-sekundaer-2.zum-farbe-dunkel      { color: #DEC229; }
.zum-farbe-sekundaer-2.zum-farbe-dunkler     { color: #AF9612; }
.zum-farbe-komplementaer-1                   { color: #F1D850; }
.zum-farbe-komplementaer-1.zum-farbe-heller  { color: #FFF0A2; }
.zum-farbe-komplementaer-1.zum-farbe-hell    { color: #FFEA77; }
.zum-farbe-komplementaer-1.zum-farbe-dunkel  { color: #DEC229; }
.zum-farbe-komplementaer-1.zum-farbe-dunkler { color: #AF9612; }
.zum-farbe-orange-1                          { color: #F19D50; }
.zum-farbe-orange-1.zum-farbe-heller         { color: #FFCEA2; }
.zum-farbe-orange-1.zum-farbe-hell           { color: #FFB877; }
.zum-farbe-orange-1.zum-farbe-dunkel         { color: #DD7F28; }
.zum-farbe-orange-1.zum-farbe-dunkler        { color: #AE5D12; }
.zum-farbe-gruen                             { color: #F1D850; }
.zum-farbe-gruen.zum-farbe-heller            { color: #FFF0A2; }
.zum-farbe-gruen.zum-farbe-hell              { color: #FFEA77; }
.zum-farbe-gruen.zum-farbe-dunkel            { color: #DEC229; }
.zum-farbe-gruen.zum-farbe-dunkler           { color: #AF9612; }
.zum-farbe-grau                              { color: #DBDBDB; }
.zum-farbe-grau.zum-farbe-heller             { color: #F1F1F1; }
.zum-farbe-grau.zum-farbe-hell               { color: #ececec; }
.zum-farbe-grau.zum-farbe-dunkel             { color: #C8C8C8; }
.zum-farbe-grau.zum-farbe-dunkler            { color: #a0a0a0; }

.zum-hintergrund-primaer                           { background-color: #F1D850; }
.zum-hintergrund-primaer.zum-farbe-heller          { background-color: #FFF0A2; }
.zum-hintergrund-primaer.zum-farbe-hell            { background-color: #FFEA77; }
.zum-hintergrund-primaer.zum-farbe-dunkel          { background-color: #DEC229; }
.zum-hintergrund-primaer.zum-farbe-dunkler         { background-color: #AF9612; }
.zum-hintergrund-sekundaer-1                       { background-color: #F1D850; }
.zum-hintergrund-sekundaer-1.zum-farbe-heller      { background-color: #FFF0A2; }
.zum-hintergrund-sekundaer-1.zum-farbe-hell        { background-color: #FFEA77; }
.zum-hintergrund-sekundaer-1.zum-farbe-dunkel      { background-color: #DEC229; }
.zum-hintergrund-sekundaer-1.zum-farbe-dunkler     { background-color: #AF9612; }
.zum-hintergrund-sekundaer-2                       { background-color: #F1D850; }
.zum-hintergrund-sekundaer-2.zum-farbe-heller      { background-color: #FFF0A2; }
.zum-hintergrund-sekundaer-2.zum-farbe-hell        { background-color: #FFEA77; }
.zum-hintergrund-sekundaer-2.zum-farbe-dunkel      { background-color: #DEC229; }
.zum-hintergrund-sekundaer-2.zum-farbe-dunkler     { background-color: #AF9612; }
.zum-hintergrund-komplementaer-1                   { background-color: #F1D850; }
.zum-hintergrund-komplementaer-1.zum-farbe-heller  { background-color: #FFF0A2; }
.zum-hintergrund-komplementaer-1.zum-farbe-hell    { background-color: #FFEA77; }
.zum-hintergrund-komplementaer-1.zum-farbe-dunkel  { background-color: #DEC229; }
.zum-hintergrund-komplementaer-1.zum-farbe-dunkler { background-color: #AF9612; }
.zum-hintergrund-orange-1                          { background-color: #F19D50; }
.zum-hintergrund-orange-1.zum-farbe-heller         { background-color: #FFCEA2; }
.zum-hintergrund-orange-1.zum-farbe-hell           { background-color: #FFB877; }
.zum-hintergrund-orange-1.zum-farbe-dunkel         { background-color: #DD7F28; }
.zum-hintergrund-orange-1.zum-farbe-dunkler        { background-color: #AE5D12; }
.zum-hintergrund-gruen                             { background-color: #F1D850; }
.zum-hintergrund-gruen.zum-farbe-heller            { background-color: #FFF0A2; }
.zum-hintergrund-gruen.zum-farbe-hell              { background-color: #FFEA77; }
.zum-hintergrund-gruen.zum-farbe-dunkel            { background-color: #DEC229; }
.zum-hintergrund-gruen.zum-farbe-dunkler           { background-color: #AF9612; }
.zum-hintergrund-grau                              { background-color: #DBDBDB; }
.zum-hintergrund-grau.zum-farbe-heller             { background-color: #F1F1F1; }
.zum-hintergrund-grau.zum-farbe-hell               { background-color: #ececec; }
.zum-hintergrund-grau.zum-farbe-dunkel             { background-color: #C8C8C8; }
.zum-hintergrund-grau.zum-farbe-dunkler            { background-color: #a0a0a0; }


Abgerufen von „https://deutsch-lernen.zum.de/index.php?title=Vorlage:Farbe&oldid=590“