Webfarbe: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

Version vom 19. Mai 2010, 07:08 Uhr

Als Webfarbe werden Farben bezeichnet, die für die Gestaltung von Webseiten eingesetzt werden. Verschieden Hersteller von Browsern haben eine Vielzahl von Farbnamen definiert. Bei diesen ist aber nicht sichergestellt, dass alle Browser diese Farbnamen auch sicher darstellen können. Um browserunabhängiges Farbenbild in Webseiten zu erzeugen, empfiehlt es sich solche Farbnamen nicht zu verwenden.

Als Websichere Farben werden Farben bezeichnet, deren Hexadezimalcode aus einer Kombination von drei (RGB: Rot, Grün, Blau) Strings bestehen.

Sichere Webfarben

Wirklich sichere Webfarbe besteht hauptsächlich aus grünen und gelben Farbtönen, ihre Werte sind in der folgenden Tabelle dargestellt:

#000	#F00	#003	#F03	#00F	#F0F	#0F0	#6F0	#FF0	#3F3	#6F3
#FF3	#0F6	#3F6	#CF6	#FF6	#0FC	#3FC	#0FF	#3FF	#6FF	#FFF

Alle 216 Farben siehe Liste 216 Webfarben

Farben verwenden

Aktion	Wikitext	Ergebnis
Farbiger Text	`<span style="color:#00F;"> Text </span>`	Text
Farbige Absätze	`<p style="color:darkgreen;"> Absatz </p>`	Absatz
Hintergrund für ein oder wenige Wörter	`<span style="background-color:yellow;"> Beispiel </span>`	Beispiel
Hintergrund eines Absatzes	`<p style="background-color:yellow;"> Absatz </p>`	Absatz
Farbiger Text + Hintergrund eines Absatzes	`<p style="color:darkgreen; background-color:yellow;"> Absatz </p>`	Absatz
Hintergrund einer Tabellenzelle	`style="background-color:#fedbca;" \| Text`	Text

Hinweise

Die Farbe Rot als Textfarbe sollte in Artikeln nicht verwendet werden.

CSS-Klassen

CSS-Klassen die in Software der bei PlusPedia verwendeten Datei - MediaWiki:Common.css - festgelegt sind.

Hintergrundfarben

Anwendungsbeispiele:

Innerhalb vom Fließtext bzw. einer Textzeile
- innerhalb einer Textzeile
oder etwas „schöner“ mit „padding“ links und rechts
- innerhalb einer Textzeile
Blockweise
- <div class="hintergrundfarbe5">Text, Bilder, Tabellen usw.

Klassen-Name	Kurzbeschreibung	Farbe in allen Skins
hintergrundfarbe1	Wie in `class="wikitable"` verwendet	#F9F9F9
hintergrundfarbe2	„Weiß“, für Nicht-Artikel-Seiten, neutral	#FFFFFF
hintergrundfarbe3	„Gelb“, auffällig	#FFFF40
hintergrundfarbe4	Sehr auffällig	#FFAA00
hintergrundfarbe5	Neutral, abgesetzt	#E0E0E0
hintergrundfarbe6	Allgemein „bunt“, für Hervorhebungen und Unterscheidungen	#B3B7FF
hintergrundfarbe7		#FFCBCB
hintergrundfarbe8		#FFEBAD
hintergrundfarbe9		#B9FFC5

Rahmenfarben

Anwendung beispielsweise:  Text

Klassenname	Kurzbeschreibung	Farbe
rahmenfarbe1	Wie Inhaltsverzeichnis	rahmenfarbe1
rahmenfarbe2	Unauffällig, geringer Kontrast	rahmenfarbe2
rahmenfarbe3	„Rot“, auffällig	rahmenfarbe3
rahmenfarbe4	Neutrale Farbe, deutlich	rahmenfarbe4
rahmenfarbe5	„Schwarz“, hoher Kontrast	rahmenfarbe5

Weblinks

Eine Farbtabelle sortiert nach Schattierungen
Web Color Reference
„VisiBone’s ‚Web-Safe‘ Color Lab“, beschreibt eine intuitivere Anordnung der websicheren Farben
Hexcodes der Webfarben
FarbFinder Ein JavaScript-Programm zum direkten einfärben einer HTML-Seite.
Umfangreiches Tutorial über Farben im Webdesign
RGB ↔ HEX Umrechner mit Farbanzeige

@@ Zeile 37: / Zeile 37: @@
 == Farben verwenden ==
-{| class="prettytable"
+{| class="wikitable"
 ! Aktion
 ! Wikitext
@@ Zeile 69: / Zeile 69: @@
 == Hinweise ==
 Die Farbe <span style="color:#F00;">'''Rot'''</span> als Textfarbe sollte in Artikeln nicht verwendet werden.
+== CSS-Klassen ==
+CSS-Klassen die in Software der bei PlusPedia verwendeten Datei - MediaWiki:Common.css - festgelegt sind.
+=== Hintergrundfarben ===
+'''Anwendungsbeispiele:'''
+* Innerhalb vom Fließtext bzw. einer Textzeile
+** <tt><nowiki><span class="hintergrundfarbe5"></nowiki></tt><span class="hintergrundfarbe1">innerhalb <span class="hintergrundfarbe5">einer</span> Textzeile</span><tt><nowiki></span></nowiki></tt>
+* oder etwas „schöner“ mit „padding“ links und rechts
+** <tt><nowiki><span class="hintergrundfarbe5" style="padding:0 1.5pt 0 1.5pt"></nowiki></tt><span class="hintergrundfarbe1" style="padding:0 1.5pt 0 1.5pt">innerhalb <span class="hintergrundfarbe5" style="padding:0 1.5pt 0 1.5pt">einer</span> Textzeile</span><tt><nowiki></span></nowiki></tt>
+* Blockweise
+** <tt><nowiki><div class="hintergrundfarbe5"></nowiki></tt>Text, Bilder, Tabellen usw.<tt><nowiki></nowiki></tt>
+{| class="wikitable"
+|- class="hintergrundfarbe8"
+! Klassen-Name
+! Kurzbeschreibung
+! Farbe in<br />allen Skins
+|-
+| hintergrundfarbe1
+| Wie in <tt>class="wikitable"</tt> verwendet
+| class="hintergrundfarbe1" align="center" | #F9F9F9
+|-
+| hintergrundfarbe2
+| „Weiß“, für Nicht-Artikel-Seiten, neutral
+| class="hintergrundfarbe2" align="center" | #FFFFFF
+|-
+| hintergrundfarbe3
+| „Gelb“, auffällig
+| class="hintergrundfarbe3" align="center" | #FFFF40
+|-
+| hintergrundfarbe4
+| Sehr auffällig
+| class="hintergrundfarbe4" align="center" | #FFAA00
+|-
+| hintergrundfarbe5
+| Neutral, abgesetzt
+| class="hintergrundfarbe5" align="center" | #E0E0E0
+|-
+| hintergrundfarbe6
+| rowspan="4" | <div style="margin:0 2em 0 2em">Allgemein „bunt“,<br />für Hervorhebungen und Unterscheidungen</div>
+| class="hintergrundfarbe6" align="center" | #B3B7FF
+|-
+| hintergrundfarbe7
+| class="hintergrundfarbe7" align="center" | #FFCBCB
+|-
+| hintergrundfarbe8
+| class="hintergrundfarbe8" align="center" | #FFEBAD
+|-
+| hintergrundfarbe9
+| class="hintergrundfarbe9" align="center" | #B9FFC5
+|}
+=== Rahmenfarben ===
+Anwendung beispielsweise: <tt><nowiki><span class="rahmenfarbe3" style="border-style: solid; border-width: 2px; margin: 2px;"> </nowiki></tt>Text<tt><nowiki></span></nowiki></tt>
+{| class="wikitable"
+|- class="hintergrundfarbe6"
+! Klassenname
+! Kurzbeschreibung
+! Farbe
+|-
+| rahmenfarbe1
+| Wie Inhaltsverzeichnis
+| <span class="rahmenfarbe1" style="border-style: solid; border-width: 2px; margin: 2px;"> rahmenfarbe1</span>
+|-
+| rahmenfarbe2
+| Unauffällig, geringer Kontrast
+| <span class="rahmenfarbe2" style="border-style: solid; border-width: 2px; margin: 2px;"> rahmenfarbe2</span>
+|-
+| rahmenfarbe3
+| „Rot“, auffällig
+| <span class="rahmenfarbe3" style="border-style: solid; border-width: 2px; margin: 2px;"> rahmenfarbe3</span>
+|-
+| rahmenfarbe4
+| Neutrale Farbe, deutlich
+| <span class="rahmenfarbe4" style="border-style: solid; border-width: 2px; margin: 2px;"> rahmenfarbe4</span>
+|-
+| rahmenfarbe5
+| „Schwarz“, hoher Kontrast
+| <span class="rahmenfarbe5" style="border-style: solid; border-width: 2px; margin: 2px;"> rahmenfarbe5</span>
+|}