Ressourcen: 256 Graustufen in HTML - Kombinationen mit Farbwert #717171

Graustufen enthalten natürlich alle 16 Graustufen und insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 256 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 255 (d.h. hexadezimal 00 bis ff).

Hintergrundfarbwert #717171
Detail	:	Hintergrundfarbwert #717171	Verlauf nach Weiß		Verlauf nach Schwarz
Farbwert	:	#717171	#717171	#717171	#717171	#717171
Farbe	:	gray113	#858585	#858585	#606060	#606060
HTML	:	#717171	#999999	#999999	#505050	#505050
CSS	:	#717171	#adadad	#adadad	#404040	#404040
CSS (Wert)	:	#717171	#c2c2c2	#c2c2c2	#303030	#303030
CSS (kürzest)	:	#717171	#d6d6d6	#d6d6d6	#202020	#202020
CSS (RGB)	:	rgb(113,113,113)	#eaeaea	#eaeaea	#101010	#101010
CSS (%RGB)	:	rgb(44%,44%,44%)	#ffffff	#ffffff	#000000	#000000

Beispiele zu Kombinationen mit Farbwert #717171

Umrandung mit Befehl h1

Mit Tag <h1> erzeugen Sie eine Überschrift. Diese kann man hervorheben und farblich gestalten.

In diesem Beispiel umranden wir <h1> mit einem 4 Pixel dicken, doppelten Rahmen in Farbwert #717171. Mit HTML geht das nicht. Wir verwenden deshalb CSS.

<style type="text/css"><!--
  h1 { 
    border-color:#717171; 
    border-width:4px; 
    border-style:double;
  }
//-->
</style>

Mehr zum Thema h1 können Sie in Grundlegende Gestaltungselemente in HTML lesen. Einzelheiten vom hier gezeigten HTML-Tag h1 erfahren Sie in der HTML Referenz unter <h1>.

Änderung der Unterstreichung bei Hover von HTML-Befehl a

Mit HTML-Tag <a> wird ein Hyperlink erzeugt. Diesen kann man farblich gestalten.

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

<style type="text/css"><!--
  a { 
    border-bottom-style:dashed; 
    border-bottom-width:3px; 
    border-bottom-color:#70b445;
  }
//-->
</style>

Nun stellen wir ein, dass bei Hover die Farbe der Unterstreichung auf Farbwert #717171 gesetzt wird.

<style type="text/css"><!--
  a: hover { 
    border-bottom-color: #717171;
  }
//-->
</style>

Die Idee ist dabei, unabhängige Formatierungen für Inhalt und Unterstreichung zu nutzen. Öfter sieht man das bei Hyperlinks. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Es ist jedoch keine "wirkliche" Unterstreichung, der Text hat gar keine Unterstreichung. Sie wird mit einem Rahmen simuliert und dieser Rahmen ist unabhängig vom Text.

Weiteres zum Thema a können Sie in Verweise und Protokolle in HTML erfahren. Möglichkeiten des HTML-Tag a finden Sie in der HTML Referenz unter <a>.