Ressourcen: 256 Graustufen in HTML - Kombinationen mit Farbe gray70

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).

Hintergrundfarbe gray70
Detail	:	Hintergrundfarbe gray70	Verlauf nach Weiß		Verlauf nach Schwarz
Farbe	:	gray70	#464646	#464646	#464646	#464646
Farbwert	:	#464646	#606060	#606060	#3c3c3c	#3c3c3c
HTML	:	gray70	#7a7a7a	#7a7a7a	#323232	#323232
CSS	:	gray70	#959595	#959595	#282828	#282828
CSS (Wert)	:	#464646	#afafaf	#afafaf	#1e1e1e	#1e1e1e
CSS (kürzest)	:	#464646	#cacaca	#cacaca	#141414	#141414
CSS (RGB)	:	rgb(70,70,70)	#e4e4e4	#e4e4e4	#0a0a0a	#0a0a0a
CSS (%RGB)	:	rgb(27%,27%,27%)	#ffffff	#ffffff	#000000	#000000

Beispiele zu Kombinationen mit Farbe gray70

Farbige Unterstreichung mit HTML-Befehl a

Einen Hyperlink setzen Sie mit Tag <a>. Dieser kann farblich gestaltet und hervorgehoben werden.

Beispielsweise unterstreichen wir <a> mit einem gestrichelten Rahmen mit 5 Pixel Dicke in Farbe gray70. Das geht in HTML nicht. Wir verwenden deshalb CSS zur Formatierung.

<style type="text/css"><!--
  a { border-bottom:5px dashed gray70; }
//-->
</style>

Die Idee ist hierbei, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu nutzen. Manchmal sehen Sie diesen Effekt bei Verweisen. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine "wirkliche" Unterstreichung, der Text ist nicht unterstrichen. Sie wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zum Thema a können Sie in Verweise und Protokolle in HTML nachsehen. Der hier verwendete HTML-Befehl a ist in der HTML Referenz bei <a> beschrieben.

Änderung der Unterstreichung bei Hover von Befehl blockquote

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

<style type="text/css"><!--
  blockquote { 
    border-bottom-style:double; 
    border-bottom-color:#d881fd; 
    border-bottom-width:2px;
  }
//-->
</style>

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

<style type="text/css"><!--
  blockquote:hover { 
    border-bottom-color:gray70;
  }
//-->
</style>

Die Idee ist dabei, verschiedene Formatierungen für Inhalt und Unterstreichung zu verwenden. Manchmal sehen Sie dies bei Links. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Es ist jedoch keine wirkliche Unterstreichung, der Text ist nicht unterstrichen. Sie wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zum Thema blockquote können Sie in Blockorientierte Elemente in HTML erfahren. Einzelheiten des HTML-Befehl blockquote lesen Sie in der HTML Referenz unter <blockquote>.