Zylinder-Oberfläche und Vorlage:Farbe: Unterschied zwischen den Seiten

Aus ZUM-Unterrichten
(Unterschied zwischen Seiten)
Keine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
 
KKeine Bearbeitungszusammenfassung
 
Zeile 1: Zeile 1:
{{Box|Lernpfad|<gallery mode="packed">
<includeonly><nowiki>#</nowiki>{{#switch: {{{1|}}}
File:Titanium-cylinder.jpg
|#default
File:Titanzylinder.jpg
|Hervorhebung1
File:Versenkpoller_1.jpg
|Frage
</gallery>
|primaer
*'''Zeitbedarf''': 1 Unterrichtsstunde
|primär          = {{#switch:{{{2|}}}|heller=FFF0A2|hell=FFEA77|#default=F1D850|dunkel=DEC229|dunkler=AF9612}}
*'''Klassenstufe: ''' 9
|Hervorhebung2
[[Datei:Logo Mathematik-digital 2011.png|200px|right|verweis=Mathematik-digital]]
|Merksatz
|Lernpfad}}
|sekundaer-1
|sekundär-1      = {{#switch:{{{2|}}}|heller=E994BF|hell=D965A0|#default=C64285|dunkel=B6226D|dunkler=900F50}}
|Ueben
|Üben
|sekundaer-2
|sekundär-2      = {{#switch:{{{2|}}}|heller=85C5CF|hell=52A1AD|#default=338894|dunkel=1B7A88|dunkler=0D5F6B}}
|Arbeitsmethode
|komplementär    = {{#switch:{{{2|}}}|heller=A592D7|hell=7B63BC|#default=5E43A5|dunkel=482998|dunkler=331878}}
|Lernpfad
|orange          = {{#switch:{{{2|}}}|heller=FFCEA2|hell=FFB877|#default=F19D50|dunkel=DD7F28|dunkler=AE5D12}}
|Unterrichtsidee
|Experimentieren
|gruen
|grün            = {{#switch:{{{2|}}}|heller=D4F69C|hell=C0EF6F|#default=A8DF4A|dunkel=8FCD25|dunkler=6CA111}}
|links          = {{#switch:{{{2|}}}|heller      |hell      |#default=0077dd|dunkel      |dunkler=005599}}
|Meinung
|Loesung
|Lösung
|Download
|Kurzinfo
|grau            = {{#switch:{{{2|}}}|heller=F1F1F1|hell=ececec|#default=DBDBDB|dunkel=C8C8C8|dunkler=a0a0a0}}
|Zitat        = a0a0a0
|unspezifisch    = ececec}}</includeonly><noinclude>


Die Vorlage {{PAGENAME}} 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.


__NOTOC__
Farben mit Bedeutung sollten, wenn möglich, nicht mit Helligkeitsangaben modifiziert werden.
== Aussehen und Oberfläche ==
{{Box|1=Was ist ein Zylinder?|2=Informiere dich über das Aussehen und die Oberfläche bzw. Größen am Zylinder!


[http://www.mathe-online.at/materialien/isabell.wolf/files/Lernpfad_Koerper/Zylinder.png '''Zylinder Info''']
;Farbnamen mit Bedeutung
|3=Hervorhebung1}}
: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 ==


{{Box|1=Übung 1|2=
<div class="multiplechoice-quiz">
[[File:Kreiszylinder.svg]]


Kreuze Merkmale und Eigenschaften eines geraden Zylinders an!
{{Box
(!n-Eck als Grundfläche)  (Grund- und Deckfläche liegen parallel zueinander) (Grund- und Deckfläche: kongruent) (Körperhöhe gleich Abstand der Kreise)(!Mantelfläche: ein Trapez) (Grund- und Deckfläche sind Kreise)
|einfache Farbe mit Bedeutung
|{{#tag: pre| <nowiki>{{Farbe|Merksatz}}</nowiki>}}{{Farbe | Merksatz}}
|Experimentieren
}}


</div>
{{Box
|3=Üben}}
|einfache Farbe aus Schema mit Helligkeitsangabe
|{{#tag: pre| <nowiki>{{Farbe|komplementär|heller}}</nowiki>}}{{Farbe | komplementär|heller}}
|Experimentieren
}}




{{Box|1=Übung 2|2=
{{Box
|Verwendung über 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
}}


Durch das Betätigen des Schiebereglers t wird der Zylinder nach und nach als Netz abgebildet. Probiere aus!
{{Box
Finde dann die "Schüttelwörter" unter der Abbildung im Lückentext!
|Verwendung über CSS-Klasse zum Icon Färben
|{{#tag: pre| <nowiki><span class="zum-farbe-Merksatz brainy hdg-school uk-icon-large"></span></nowiki>}}{{#tag: span ||class = zum-farbe-Merksatz brainy hdg-school uk-icon-large}}
|Experimentieren
}}


<ggb_applet id="463597" width="90%" height="450" border="888888" />


<div class="schuettel-quiz">
Ergänze die unverdrehten Wörter im Lückentext!


Die Oberfläche eines Zylinders besteht aus '''Grundfläche''', '''Deckfläche''' und '''Mantelfläche'''. Die Grund- und Deckfläche ist ein '''Kreis''', die Mantelfläche ein '''Rechteck'''.
== Farbtabellen ==
=== Farben mit Bedeutung ===
{|class=wikitable style="width: 100%;"
!style="width: 25%"|Hervorhebung1
|{{Farbe/Beispiel|Hervorhebung1}}
!style="width: 25%"|Frage
|{{Farbe/Beispiel|Frage}}
|-
!style="width: 25%"|Lernpfad
|{{Farbe/Beispiel|Lernpfad}}
!Hervorhebung2
|{{Farbe/Beispiel|Hervorhebung2}}
|-
!Merksatz
|{{Farbe/Beispiel|Merksatz}}
!Üben
|{{Farbe/Beispiel|Üben}}
|-
!Arbeitsmethode
|{{Farbe/Beispiel|Arbeitsmethode}}
!Unterrichtsidee
|{{Farbe/Beispiel|Unterrichtsidee}}
|-
!Experimentieren
|{{Farbe/Beispiel|Experimentieren}}
!Meinung
|{{Farbe/Beispiel|Meinung}}
|-
!Lösung
|{{Farbe/Beispiel|Lösung}}
!Download
|{{Farbe/Beispiel|Download}}
|-
!Kurzinfo
|{{Farbe/Beispiel|Kurzinfo}}
!Zitat
|{{Farbe/Beispiel|Zitat}}
|}


</div>
=== Farbschema ===
|3=Üben}}
{|class=wikitable
!primär
|{{Farbe/Beispiel|primär|heller}}
|{{Farbe/Beispiel|primär|hell}}
|{{Farbe/Beispiel|primär}}
|{{Farbe/Beispiel|primär|dunkel}}
|{{Farbe/Beispiel|primär|dunkler}}
|-
!sekundär-1
|{{Farbe/Beispiel|sekundär-1|heller}}
|{{Farbe/Beispiel|sekundär-1|hell}}
|{{Farbe/Beispiel|sekundär-1}}
|{{Farbe/Beispiel|sekundär-1|dunkel}}
|{{Farbe/Beispiel|sekundär-1|dunkler}}
|-
!sekundär-2
|{{Farbe/Beispiel|sekundär-2|heller}}
|{{Farbe/Beispiel|sekundär-2|hell}}
|{{Farbe/Beispiel|sekundär-2}}
|{{Farbe/Beispiel|sekundär-2|dunkel}}
|{{Farbe/Beispiel|sekundär-2|dunkler}}
|-
!komplementär
|{{Farbe/Beispiel|komplementär|heller}}
|{{Farbe/Beispiel|komplementär|hell}}
|{{Farbe/Beispiel|komplementär}}
|{{Farbe/Beispiel|komplementär|dunkel}}
|{{Farbe/Beispiel|komplementär|dunkler}}
|-
!orange
|{{Farbe/Beispiel|orange|heller}}
|{{Farbe/Beispiel|orange|hell}}
|{{Farbe/Beispiel|orange}}
|{{Farbe/Beispiel|orange|dunkel}}
|{{Farbe/Beispiel|orange|dunkler}}
|-
!grün
|{{Farbe/Beispiel|grün|heller}}
|{{Farbe/Beispiel|grün|hell}}
|{{Farbe/Beispiel|grün}}
|{{Farbe/Beispiel|grün|dunkel}}
|{{Farbe/Beispiel|grün|dunkler}}
|-
!links
|{{Farbe/Beispiel|links|heller}}
|{{Farbe/Beispiel|links|hell}}
|{{Farbe/Beispiel|links}}
|{{Farbe/Beispiel|links|dunkel}}
|{{Farbe/Beispiel|links|dunkler}}
|-
!grau
|{{Farbe/Beispiel|grau|heller}}
|{{Farbe/Beispiel|grau|hell}}
|{{Farbe/Beispiel|grau}}
|{{Farbe/Beispiel|grau|dunkel}}
|{{Farbe/Beispiel|grau|dunkler}}
|}


== Grund- und Deckfläche ==
== CSS Code for Common.css ==
{{Box|1=Aufgabe 1|2=Die Grund- und Deckfläche ist jeweils ein Kreis. Notiere die Formel für die Berechnung des Kreisflächeninhaltes in dein Heft!{{Lösung versteckt|1=<math>A = \pi r^2</math>}}
|3=Arbeitsmethode}}


{{Box|1=Aufgabe 2|2=Berechne die Größe der Grundfläche eines Zylinders, wenn der Radius <math>r = 6,7 cm</math> groß ist! {{Lösung versteckt|1=<math>G = 141 cm^2</math>}}
/* Bedeutungsfarben */
|3=Arbeitsmethode}}
.zum-farbe-Hervorhebung1  { color:{{Farbe|Hervorhebung1  }}; }
 
.zum-farbe-Frage          { color:{{Farbe|Frage          }}; }
 
.zum-farbe-Lernpfad        { color:{{Farbe|Lernpfad        }}; }
==Mantelfläche==
.zum-farbe-Hervorhebung2  { color:{{Farbe|Hervorhebung2  }}; }
{{Box|1=Aufgabe 3|2=Die Überlege, welche geometrische Form die Mantelfläche im Netz hat und welche Größen du für die Berechnung dieser Fläche benötigst. Notiere die Formel für die Berechnung des Mantelfächeninhaltes des Zylinders!{{Lösung versteckt|1=<math>M = 2 \pi rh</math>}}
.zum-farbe-Merksatz        { color:{{Farbe|Merksatz        }}; }
|3=Arbeitsmethode}}
.zum-farbe-Üben,
 
.zum-farbe-Ueben          { color:{{Farbe|Üben            }}; }
{{Box|1=Aufgabe 4|2=Berechne den Mantelflächeninhalt für den Zylinder mit dem Grundflächenradius 6,7cm und der Körperhöhe von 9 cm!{{Lösung versteckt|1=<math>M = 378,9 cm^2</math>}}
.zum-farbe-Arbeitsmethode  { color:{{Farbe|Arbeitsmethode  }}; }
|3=Arbeitsmethode}}
.zum-farbe-Unterrichtsidee { color:{{Farbe|Unterrichtsidee }}; }
 
.zum-farbe-Experimentieren { color:{{Farbe|Experimentieren }}; }
 
.zum-farbe-Arbeitsmethode  { color:{{Farbe|Arbeitsmethode  }}; }
==Oberflächeninhalt eines Zylinders==
.zum-farbe-Unterrichtsidee { color:{{Farbe|Unterrichtsidee }}; }
{{Box|1=Aufgabe 5|2=Überlege, aus welchen Teilen die gesamte Oberfläche des Zylinders besteht (siehe auch Abbildung zum Netz) und stelle die Formel für die Berechnung entsprechend zusammen!{{Lösung versteckt|1=<math>O = 2\pi r^2 + 2 \pi rh</math>}}
.zum-farbe-Experimentieren { color:{{Farbe|Experimentieren }}; }
|3=Arbeitsmethode}}
.zum-farbe-Meinung        { color:{{Farbe|Meinung        }}; }
 
.zum-farbe-Lösung,
{{Box|1=Aufgabe 6|2=Berechne den Oberflächeninhalt des Zylinders mit dem Grundflächenradius von 6,7 cm und der Körperhöhe von 9 cm.{{Lösung versteckt|1=<math>O = 660,9 cm^2</math>}}
.zum-farbe-Loesung        { color:{{Farbe|Lösung         }}; }
|3=Arbeitsmethode}}
.zum-farbe-Download        { color:{{Farbe|Download        }}; }
 
.zum-farbe-Kurzinfo        { color:{{Farbe|Kurzinfo        }}; }
 
.zum-farbe-Zitat          { color:{{Farbe|Zitat          }}; }
 
{{SORTIERUNG:{{SUBPAGENAME}}}}
.zum-hintergrund-Hervorhebung1  { background-color:{{Farbe|Hervorhebung1  }}; }
[[Kategorie:Mathematik-digital]]
.zum-hintergrund-Frage          { background-color:{{Farbe|Frage          }}; }
[[Kategorie:Oberfläche des Zylinders]]
.zum-hintergrund-Lernpfad        { background-color:{{Farbe|Lernpfad        }}; }
[[Kategorie:ZUM2Edutags]]
.zum-hintergrund-Hervorhebung2  { background-color:{{Farbe|Hervorhebung2  }}; }
[[Kategorie:Mathematik]]
.zum-hintergrund-Merksatz        { background-color:{{Farbe|Merksatz        }}; }
[[Kategorie:Lernpfad]]
.zum-hintergrund-Üben,
[[Kategorie:Interaktive Übung]]
.zum-hintergrund-Ueben          { background-color:{{Farbe|Üben            }}; }
[[Kategorie:R-Quiz]]
.zum-hintergrund-Arbeitsmethode  { background-color:{{Farbe|Arbeitsmethode }}; }
[[Kategorie:GeoGebra]]
.zum-hintergrund-Unterrichtsidee { background-color:{{Farbe|Unterrichtsidee }}; }
.zum-hintergrund-Experimentieren { background-color:{{Farbe|Experimentieren }}; }
.zum-hintergrund-Arbeitsmethode  { background-color:{{Farbe|Arbeitsmethode  }}; }
.zum-hintergrund-Unterrichtsidee { background-color:{{Farbe|Unterrichtsidee }}; }
.zum-hintergrund-Experimentieren { background-color:{{Farbe|Experimentieren }}; }
.zum-hintergrund-Meinung        { background-color:{{Farbe|Meinung        }}; }
.zum-hintergrund-Lösung,
.zum-hintergrund-Loesung        { background-color:{{Farbe|Lösung         }}; }
.zum-hintergrund-Download        { background-color:{{Farbe|Download        }}; }
.zum-hintergrund-Kurzinfo        { background-color:{{Farbe|Kurzinfo        }}; }
.zum-hintergrund-Zitat          { background-color:{{Farbe|Zitat          }}; } 
/* komplettes Farbschema */
.zum-farbe-primär                            { color: {{Farbe|primär                  }}; }
.zum-farbe-primär.zum-farbe-heller          { color: {{Farbe|primär        |heller  }}; }
.zum-farbe-primär.zum-farbe-hell            { color: {{Farbe|primär        |hell    }}; }
.zum-farbe-primär.zum-farbe-dunkel          { color: {{Farbe|primär        |dunkel  }}; }
.zum-farbe-primär.zum-farbe-dunkler          { color: {{Farbe|primär        |dunkler  }}; }
.zum-farbe-sekundär-1                        { color: {{Farbe|sekundär-1              }}; }
.zum-farbe-sekundär-1.zum-farbe-heller      { color: {{Farbe|sekundär-1    |heller  }}; }
.zum-farbe-sekundär-1.zum-farbe-hell        { color: {{Farbe|sekundär-1    |hell    }}; }
.zum-farbe-sekundär-1.zum-farbe-dunkel      { color: {{Farbe|sekundär-1     |dunkel  }}; }
.zum-farbe-sekundär-1.zum-farbe-dunkler      { color: {{Farbe|sekundär-1    |dunkler  }}; }
.zum-farbe-sekundär-2                        { color: {{Farbe|sekundär-2              }}; }
.zum-farbe-sekundär-2.zum-farbe-heller      { color: {{Farbe|sekundär-2    |heller  }}; }
.zum-farbe-sekundär-2.zum-farbe-hell        { color: {{Farbe|sekundär-2    |hell    }}; }
.zum-farbe-sekundär-2.zum-farbe-dunkel      { color: {{Farbe|sekundär-2    |dunkel  }}; }
.zum-farbe-sekundär-2.zum-farbe-dunkler      { color: {{Farbe|sekundär-2     |dunkler  }}; }
.zum-farbe-komplementär-1                    { color: {{Farbe|komplementär-1          }}; }
.zum-farbe-komplementär-1.zum-farbe-heller  { color: {{Farbe|komplementär-1 |heller  }}; }
.zum-farbe-komplementär-1.zum-farbe-hell    { color: {{Farbe|komplementär-1 |hell    }}; }
.zum-farbe-komplementär-1.zum-farbe-dunkel  { color: {{Farbe|komplementär-1 |dunkel  }}; }
.zum-farbe-komplementär-1.zum-farbe-dunkler  { color: {{Farbe|komplementär-1 |dunkler  }}; }
.zum-farbe-orange-1                          { color: {{Farbe|orange                  }}; }
.zum-farbe-orange-1.zum-farbe-heller        { color: {{Farbe|orange        |heller  }}; }
.zum-farbe-orange-1.zum-farbe-hell          { color: {{Farbe|orange        |hell    }}; }
.zum-farbe-orange-1.zum-farbe-dunkel        { color: {{Farbe|orange        |dunkel  }}; }
.zum-farbe-orange-1.zum-farbe-dunkler        { color: {{Farbe|orange        |dunkler  }}; }
.zum-farbe-grün                              { color: {{Farbe|grün                    }}; }
.zum-farbe-grün.zum-farbe-heller            { color: {{Farbe|grün          |heller  }}; }
.zum-farbe-grün.zum-farbe-hell              { color: {{Farbe|grün          |hell    }}; }
.zum-farbe-grün.zum-farbe-dunkel            { color: {{Farbe|grün          |dunkel  }}; }
.zum-farbe-grün.zum-farbe-dunkler            { color: {{Farbe|grün          |dunkler  }}; }
.zum-farbe-grau                              { color: {{Farbe|grau                      }}; }
.zum-farbe-grau.zum-farbe-heller            { color: {{Farbe|grau          |heller  }}; }
.zum-farbe-grau.zum-farbe-hell              { color: {{Farbe|grau          |hell    }}; }
.zum-farbe-grau.zum-farbe-dunkel            { color: {{Farbe|grau          |dunkel  }}; }
.zum-farbe-grau.zum-farbe-dunkler            { color: {{Farbe|grau          |dunkler  }}; }
.zum-hintergrund-primär                            { background-color: {{Farbe|primär                  }}; }
.zum-hintergrund-primär.zum-farbe-heller          { background-color: {{Farbe|primär        |heller  }}; }
.zum-hintergrund-primär.zum-farbe-hell            { background-color: {{Farbe|primär        |hell    }}; }
.zum-hintergrund-primär.zum-farbe-dunkel          { background-color: {{Farbe|primär        |dunkel  }}; }
.zum-hintergrund-primär.zum-farbe-dunkler          { background-color: {{Farbe|primär        |dunkler }}; }
.zum-hintergrund-sekundär-1                       { background-color: {{Farbe|sekundär-1              }}; }
.zum-hintergrund-sekundär-1.zum-farbe-heller      { background-color: {{Farbe|sekundär-1    |heller  }}; }
.zum-hintergrund-sekundär-1.zum-farbe-hell        { background-color: {{Farbe|sekundär-1    |hell    }}; }
.zum-hintergrund-sekundär-1.zum-farbe-dunkel      { background-color: {{Farbe|sekundär-1    |dunkel  }}; }
.zum-hintergrund-sekundär-1.zum-farbe-dunkler      { background-color: {{Farbe|sekundär-1    |dunkler }}; }
.zum-hintergrund-sekundär-2                        { background-color: {{Farbe|sekundär-2              }}; }
.zum-hintergrund-sekundär-2.zum-farbe-heller      { background-color: {{Farbe|sekundär-2    |heller  }}; }
.zum-hintergrund-sekundär-2.zum-farbe-hell        { background-color: {{Farbe|sekundär-2    |hell    }}; }
.zum-hintergrund-sekundär-2.zum-farbe-dunkel      { background-color: {{Farbe|sekundär-2     |dunkel  }}; }
.zum-hintergrund-sekundär-2.zum-farbe-dunkler      { background-color: {{Farbe|sekundär-2     |dunkler }}; }
.zum-hintergrund-komplementär                      { background-color: {{Farbe|komplementär-1          }}; }
.zum-hintergrund-komplementär.zum-farbe-heller    { background-color: {{Farbe|komplementär-1 |heller  }}; }
.zum-hintergrund-komplementär.zum-farbe-hell      { background-color: {{Farbe|komplementär-1 |hell    }}; }
.zum-hintergrund-komplementär.zum-farbe-dunkel    { background-color: {{Farbe|komplementär-1 |dunkel  }}; }
.zum-hintergrund-komplementär.zum-farbe-dunkler    { background-color: {{Farbe|komplementär-1 |dunkler }}; }
.zum-hintergrund-orange                            { background-color: {{Farbe|orange                  }}; }
.zum-hintergrund-orange.zum-farbe-heller          { background-color: {{Farbe|orange        |heller  }}; }
.zum-hintergrund-orange.zum-farbe-hell            { background-color: {{Farbe|orange        |hell    }}; }
.zum-hintergrund-orange.zum-farbe-dunkel          { background-color: {{Farbe|orange        |dunkel  }}; }
.zum-hintergrund-orange.zum-farbe-dunkler          { background-color: {{Farbe|orange        |dunkler }}; }
.zum-hintergrund-grün                              { background-color: {{Farbe|grün                    }}; }
.zum-hintergrund-grün.zum-farbe-heller            { background-color: {{Farbe|grün          |heller  }}; }
.zum-hintergrund-grün.zum-farbe-hell              { background-color: {{Farbe|grün          |hell    }}; }
.zum-hintergrund-grün.zum-farbe-dunkel            { background-color: {{Farbe|grün          |dunkel  }}; }
.zum-hintergrund-grün.zum-farbe-dunkler            { background-color: {{Farbe|grün          |dunkler }}; }
.zum-hintergrund-grau                              { background-color: {{Farbe|grau                    }}; }
.zum-hintergrund-grau.zum-farbe-heller            { background-color: {{Farbe|grau          |heller  }}; }
.zum-hintergrund-grau.zum-farbe-hell              { background-color: {{Farbe|grau          |hell    }}; }
.zum-hintergrund-grau.zum-farbe-dunkel            { background-color: {{Farbe|grau          |dunkel  }}; }
.zum-hintergrund-grau.zum-farbe-dunkler            { background-color: {{Farbe|grau          |dunkler }}; }
/* overrides
  * uses mediawiki parent selector to establish override
  */
.mediawiki .box.hervorhebung1  { border-left-color:{{Farbe|Hervorhebung1  }}; }
.mediawiki .box.frage          { border-left-color:{{Farbe|Frage          }}; }
.mediawiki .box.lernpfad        { border-left-color:{{Farbe|Lernpfad        }}; }
.mediawiki .box.hervorhebung2  { border-left-color:{{Farbe|Hervorhebung2  }}; }
.mediawiki .box.merksatz        { border-left-color:{{Farbe|Merksatz        }}; }
.mediawiki .box.üben,
.mediawiki .box.ueben          { border-left-color:{{Farbe|Üben            }}; }
.mediawiki .box.arbeitsmethode  { border-left-color:{{Farbe|Arbeitsmethode }}; }
.mediawiki .box.unterrichtsidee { border-left-color:{{Farbe|Unterrichtsidee }}; }
.mediawiki .box.experimentieren { border-left-color:{{Farbe|Experimentieren }}; }
.mediawiki .box.arbeitsmethode  { border-left-color:{{Farbe|Arbeitsmethode  }}; }
.mediawiki .box.unterrichtsidee { border-left-color:{{Farbe|Unterrichtsidee }}; }
.mediawiki .box.experimentieren { border-left-color:{{Farbe|Experimentieren }}; }
.mediawiki .box.meinung        { border-left-color:{{Farbe|Meinung        }}; }
.mediawiki .box.lösung,
.mediawiki .box.loesung        { border-left-color:{{Farbe|Lösung         }}; }
.mediawiki .box.download        { border-left-color:{{Farbe|Download        }}; }
.mediawiki .box.kurzinfo        { border-left-color:{{Farbe|Kurzinfo        }}; }
.mediawiki .box.zitat          { border-left-color:{{Farbe|Zitat          }}; }
.mediawiki .button-left a,
.mediawiki .button-center a,
.mediawiki .button-right a      { background-color: {{Farbe|grau      }};      }
.mediawiki .button-left a:hover, 
.mediawiki .button-left a:focus,
.mediawiki .button-center a:hover,
.mediawiki .button-center a:focus,
.mediawiki .button-right a:hover,
.mediawiki .button-right a:focus          { background-color: {{Farbe|grau|hell  }};    }
.mediawiki .button-left.button-primary a,
.mediawiki .button-center.button-primary a,
.mediawiki .button-right.button-primary a  { background-color: {{Farbe|links|dunkel}};    }
.mediawiki .button-left.button-primary a:hover,
.mediawiki .button-left.button-primary a:focus,
.mediawiki .button-center.button-primary a:hover,
.mediawiki .button-center.button-primary a:focus,
.mediawiki .button-right.button-primary a:hover
.mediawiki .button-right.button-primary a:focus { background-color: {{Farbe|links|hell}};  }
.mediawiki .uk-text-muted        { color: {{Farbe|grau|dunkler    }} !important; }
.mediawiki .uk-text-primary      { color: {{Farbe|sekundär-2|dunkel}} !important; }
.mediawiki .uk-text-success      { color: {{Farbe|grün|dunkler    }} !important; }
.mediawiki .uk-text-warning      { color: {{Farbe|orange|dunkler  }} !important; }
.mediawiki .uk-text-danger        { color: {{Farbe|sekundär-1|dunkel}} !important; }
.mediawiki .uk-text-contrast      { color: #fff !important;    }
.mediawiki .uk-button            { background-color: {{Farbe|grau            }}; }
.mediawiki .uk-button:hover,
.mediawiki .uk-button:focus      { background-color: {{Farbe|grau|hell        }}; }
.mediawiki .uk-button.uk-active,
.mediawiki .uk-button:active      { background-color: {{Farbe|grau|heller      }}; }
.mediawiki .uk-button-primary        { background-color: {{Farbe|links|dunkel    }}; }
.mediawiki .uk-button-primary:hover,
.mediawiki .uk-button-primary:focus  { background-color: {{Farbe|links            }}; }
.mediawiki .uk-button-primary.uk-active,
.mediawiki .uk-button-primary:active { background-color: {{Farbe|links|hell      }}; }
.mediawiki .uk-button-success        { background-color: {{Farbe|grün|dunkler    }}; }
.mediawiki .uk-button-success:hover,
.mediawiki .uk-button-success:focus  { background-color: {{Farbe|grün|dunkel      }}; }
.mediawiki .uk-button-success.uk-active,
.mediawiki .uk-button-success:active { background-color: {{Farbe|grün            }}; }
.mediawiki .uk-button-danger        { background-color: {{Farbe|sekundär-1|dunkel }}; }
.mediawiki .uk-button-danger:hover,
.mediawiki .uk-button-danger:focus  { background-color: {{Farbe|sekundär-1|      }}; }
.mediawiki .uk-button-danger.uk-active,
.mediawiki .uk-button-danger:active { background-color: {{Farbe|sekundär-1|hell  }}; }
.mediawiki .uk-button-link        { color: {{Farbe|links|dunkel }}; }
.mediawiki .uk-button-link:hover,
.mediawiki .uk-button-link:focus,
.mediawiki .uk-button-link.uk-active,
.mediawiki .uk-button-link:active { color: {{Farbe|links|      }}; }
.mediawiki .uk-button:disabled      { background-color: {{Farbe|grau|hell    }}; }
.mediawiki .uk-button-link:disabled {            color: {{Farbe|grau|hell    }}; }
</noinclude>

Version vom 20. November 2018, 08:39 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

einfache Farbe mit Bedeutung 
 {{Farbe|Merksatz}}
#C64285

einfache Farbe aus Schema mit Helligkeitsangabe 
 {{Farbe|komplementär|heller}}
#A592D7


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

Verwendung über CSS-Klasse zum Icon Färben 
 <span class="zum-farbe-Merksatz brainy hdg-school uk-icon-large"></span>


Farbtabellen

Farben mit Bedeutung

Hervorhebung1 #F1D850

{{Farbe |Hervorhebung1}}

Frage #F1D850

{{Farbe |Frage}}

Lernpfad #F19D50

{{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:#F19D50; }
.zum-farbe-Hervorhebung2   { color:#C64285; }
.zum-farbe-Merksatz        { color:#C64285; }
.zum-farbe-Üben,
.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,
.zum-farbe-Loesung         { 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:#F19D50; }
.zum-hintergrund-Hervorhebung2   { background-color:#C64285; }
.zum-hintergrund-Merksatz        { background-color:#C64285; }
.zum-hintergrund-Üben,
.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,
.zum-hintergrund-Loesung         { 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-primär                            { color: #F1D850; }
.zum-farbe-primär.zum-farbe-heller           { color: #FFF0A2; }
.zum-farbe-primär.zum-farbe-hell             { color: #FFEA77; }
.zum-farbe-primär.zum-farbe-dunkel           { color: #DEC229; }
.zum-farbe-primär.zum-farbe-dunkler          { color: #AF9612; }
.zum-farbe-sekundär-1                        { color: #C64285; }
.zum-farbe-sekundär-1.zum-farbe-heller       { color: #E994BF; }
.zum-farbe-sekundär-1.zum-farbe-hell         { color: #D965A0; }
.zum-farbe-sekundär-1.zum-farbe-dunkel       { color: #B6226D; }
.zum-farbe-sekundär-1.zum-farbe-dunkler      { color: #900F50; }
.zum-farbe-sekundär-2                        { color: #338894; }
.zum-farbe-sekundär-2.zum-farbe-heller       { color: #85C5CF; }
.zum-farbe-sekundär-2.zum-farbe-hell         { color: #52A1AD; }
.zum-farbe-sekundär-2.zum-farbe-dunkel       { color: #1B7A88; }
.zum-farbe-sekundär-2.zum-farbe-dunkler      { color: #0D5F6B; }
.zum-farbe-komplementär-1                    { color: #F1D850; }
.zum-farbe-komplementär-1.zum-farbe-heller   { color: #FFF0A2; }
.zum-farbe-komplementär-1.zum-farbe-hell     { color: #FFEA77; }
.zum-farbe-komplementär-1.zum-farbe-dunkel   { color: #DEC229; }
.zum-farbe-komplementär-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-grün                              { color: #A8DF4A; }
.zum-farbe-grün.zum-farbe-heller             { color: #D4F69C; }
.zum-farbe-grün.zum-farbe-hell               { color: #C0EF6F; }
.zum-farbe-grün.zum-farbe-dunkel             { color: #8FCD25; }
.zum-farbe-grün.zum-farbe-dunkler            { color: #6CA111; }
.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-primär                            { background-color: #F1D850; }
.zum-hintergrund-primär.zum-farbe-heller           { background-color: #FFF0A2; }
.zum-hintergrund-primär.zum-farbe-hell             { background-color: #FFEA77; }
.zum-hintergrund-primär.zum-farbe-dunkel           { background-color: #DEC229; }
.zum-hintergrund-primär.zum-farbe-dunkler          { background-color: #AF9612; }
.zum-hintergrund-sekundär-1                        { background-color: #C64285; }
.zum-hintergrund-sekundär-1.zum-farbe-heller       { background-color: #E994BF; }
.zum-hintergrund-sekundär-1.zum-farbe-hell         { background-color: #D965A0; }
.zum-hintergrund-sekundär-1.zum-farbe-dunkel       { background-color: #B6226D; }
.zum-hintergrund-sekundär-1.zum-farbe-dunkler      { background-color: #900F50; }
.zum-hintergrund-sekundär-2                        { background-color: #338894; }
.zum-hintergrund-sekundär-2.zum-farbe-heller       { background-color: #85C5CF; }
.zum-hintergrund-sekundär-2.zum-farbe-hell         { background-color: #52A1AD; }
.zum-hintergrund-sekundär-2.zum-farbe-dunkel       { background-color: #1B7A88; }
.zum-hintergrund-sekundär-2.zum-farbe-dunkler      { background-color: #0D5F6B; }
.zum-hintergrund-komplementär                      { background-color: #F1D850; }
.zum-hintergrund-komplementär.zum-farbe-heller     { background-color: #FFF0A2; }
.zum-hintergrund-komplementär.zum-farbe-hell       { background-color: #FFEA77; }
.zum-hintergrund-komplementär.zum-farbe-dunkel     { background-color: #DEC229; }
.zum-hintergrund-komplementär.zum-farbe-dunkler    { background-color: #AF9612; }
.zum-hintergrund-orange                            { background-color: #F19D50; }
.zum-hintergrund-orange.zum-farbe-heller           { background-color: #FFCEA2; }
.zum-hintergrund-orange.zum-farbe-hell             { background-color: #FFB877; }
.zum-hintergrund-orange.zum-farbe-dunkel           { background-color: #DD7F28; }
.zum-hintergrund-orange.zum-farbe-dunkler          { background-color: #AE5D12; }
.zum-hintergrund-grün                              { background-color: #A8DF4A; }
.zum-hintergrund-grün.zum-farbe-heller             { background-color: #D4F69C; }
.zum-hintergrund-grün.zum-farbe-hell               { background-color: #C0EF6F; }
.zum-hintergrund-grün.zum-farbe-dunkel             { background-color: #8FCD25; }
.zum-hintergrund-grün.zum-farbe-dunkler            { background-color: #6CA111; }
.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; }

/* overrides 
 * uses mediawiki parent selector to establish override
 */
.mediawiki .box.hervorhebung1   { border-left-color:#F1D850; }
.mediawiki .box.frage           { border-left-color:#F1D850; }
.mediawiki .box.lernpfad        { border-left-color:#F19D50; }
.mediawiki .box.hervorhebung2   { border-left-color:#C64285; }
.mediawiki .box.merksatz        { border-left-color:#C64285; }
.mediawiki .box.üben,
.mediawiki .box.ueben           { border-left-color:#338894; }
.mediawiki .box.arbeitsmethode  { border-left-color:#5E43A5; }
.mediawiki .box.unterrichtsidee { border-left-color:#A8DF4A; }
.mediawiki .box.experimentieren { border-left-color:#A8DF4A; }
.mediawiki .box.arbeitsmethode  { border-left-color:#5E43A5; }
.mediawiki .box.unterrichtsidee { border-left-color:#A8DF4A; }
.mediawiki .box.experimentieren { border-left-color:#A8DF4A; }
.mediawiki .box.meinung         { border-left-color:#DBDBDB; }
.mediawiki .box.lösung,
.mediawiki .box.loesung         { border-left-color:#DBDBDB; }
.mediawiki .box.download        { border-left-color:#DBDBDB; }
.mediawiki .box.kurzinfo        { border-left-color:#DBDBDB; }
.mediawiki .box.zitat           { border-left-color:#a0a0a0; } 

.mediawiki .button-left a,
.mediawiki .button-center a,
.mediawiki .button-right a      { background-color: #DBDBDB;      }

.mediawiki .button-left a:hover,   
.mediawiki .button-left a:focus,
.mediawiki .button-center a:hover, 
.mediawiki .button-center a:focus,
.mediawiki .button-right a:hover,
.mediawiki .button-right a:focus           { background-color: #ececec;     }

.mediawiki .button-left.button-primary a,
.mediawiki .button-center.button-primary a,
.mediawiki .button-right.button-primary a  { background-color: #005599;     }

.mediawiki .button-left.button-primary a:hover,
.mediawiki .button-left.button-primary a:focus,
.mediawiki .button-center.button-primary a:hover,
.mediawiki .button-center.button-primary a:focus,
.mediawiki .button-right.button-primary a:hover
.mediawiki .button-right.button-primary a:focus { background-color: #0077dd;  }

.mediawiki .uk-text-muted         { color: #a0a0a0 !important; }
.mediawiki .uk-text-primary       { color: #1B7A88 !important; }
.mediawiki .uk-text-success       { color: #6CA111 !important; }
.mediawiki .uk-text-warning       { color: #AE5D12 !important; }
.mediawiki .uk-text-danger        { color: #B6226D !important; }
.mediawiki .uk-text-contrast      { color: #fff !important;    }

.mediawiki .uk-button             { background-color: #DBDBDB; }
.mediawiki .uk-button:hover,
.mediawiki .uk-button:focus       { background-color: #ececec; }
.mediawiki .uk-button.uk-active,
.mediawiki .uk-button:active      { background-color: #F1F1F1; }

.mediawiki .uk-button-primary        { background-color: #005599; }
.mediawiki .uk-button-primary:hover,
.mediawiki .uk-button-primary:focus  { background-color: #0077dd; }
.mediawiki .uk-button-primary.uk-active,
.mediawiki .uk-button-primary:active { background-color: #0077dd; }

.mediawiki .uk-button-success        { background-color: #6CA111; }
.mediawiki .uk-button-success:hover,
.mediawiki .uk-button-success:focus  { background-color: #8FCD25; }
.mediawiki .uk-button-success.uk-active,
.mediawiki .uk-button-success:active { background-color: #A8DF4A; }

.mediawiki .uk-button-danger        { background-color: #B6226D; }
.mediawiki .uk-button-danger:hover,
.mediawiki .uk-button-danger:focus  { background-color: #C64285; }
.mediawiki .uk-button-danger.uk-active,
.mediawiki .uk-button-danger:active { background-color: #D965A0; }

.mediawiki .uk-button-link        { color: #005599; }
.mediawiki .uk-button-link:hover,
.mediawiki .uk-button-link:focus,
.mediawiki .uk-button-link.uk-active,
.mediawiki .uk-button-link:active { color: #0077dd; }


.mediawiki .uk-button:disabled      { background-color: #ececec; }
.mediawiki .uk-button-link:disabled {            color: #ececec; }
Abgerufen von „https://unterrichten.zum.de/index.php?title=Zylinder-Oberfläche&oldid=72786“