Ressourcen: 16 Graustufen in HTML - Kombinationen mit Farbwert #111111

Graustufen enthalten insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 16 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 15 (d.h. hexadezimal 0 bis f) für r, g und b.

Hintergrundfarbwert #111111
Detail	:	Hintergrundfarbwert #111111	Verlauf nach Weiß		Verlauf nach Schwarz
Farbwert	:	#111111	#111111	#111111	#111111	#111111
Farbe	:	gray17	#333333	#333333	#0e0e0e	#0e0e0e
HTML	:	#111111	#555555	#555555	#0c0c0c	#0c0c0c
CSS	:	#111111	#777777	#777777	#090909	#090909
CSS (Wert)	:	#111111	#999999	#999999	#070707	#070707
CSS (kürzest)	:	#111	#bbbbbb	#bbbbbb	#040404	#040404
CSS (RGB)	:	rgb(17,17,17)	#dddddd	#dddddd	#020202	#020202
CSS (%RGB)	:	rgb(6%,6%,6%)	#ffffff	#ffffff	#000000	#000000

Beispiele zu Kombinationen mit Farbwert #111111

Änderung der Hintergrundfarbe bei Hover von Tag h6

Eine Überschrift der 6. Stufe erzeugen Sie mit Tag <h6>. Diese können Sie farblich gestalten und hervorheben.

Die Hintergrundfarbe soll sich ändern, wenn man mit der Maus darauf zeigt. Für das Beispiel bereiten wir zunächst Formatierungen von <h6> vor.

Für dieses Beispiel legen wir die Hintergrundfarbe von <h6> auf Farbwert #111111 fest. Die Textfarbe behalten wir bei, setzen jedoch die Schriftart auf sans-serif und setzen die Schriftgröße auf 13px.

<style type="text/css"><!--
  h6 { 
    background-color:#243987; 
    font-family:sans-serif; 
    font-size:13px;
  }
//-->
</style>

Nun stellen wir ein, dass bei Hover die Hintergrundfarbe auf Farbwert #111111 gesetzt wird.

<style type="text/css"><!--
  h6:hover { 
    background-color:#111111;
  }
//-->
</style>

Weiteres zum Thema können Sie in Grundlegende Gestaltungselemente in HTML lesen. Mehr zum HTML-Tag h6 lesen Sie in der HTML Referenz unter <h6>.

Farbige Unterstreichung mit HTML-Tag span

Beispielsweise unterstreichen wir <span> mit einem gestrichelten Rahmen mit 4 Pixel Dicke in Farbwert #111111. Das geht mit HTML kaum. Daher verwenden wir hier CSS.

<style type="text/css"><!--
  span { border-bottom:4px dashed #111; }
//-->
</style>

Die Idee ist, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu haben. Öfter sehen Sie das bei Verweisen. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Hierbei handelt es sich aber nicht um eine wirkliche Unterstreichung, der Text ist gar nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Die Beschreibung vom Tag span finden Sie in der HTML Referenz unter <span>.