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

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 #d3d3d3
Detail	:	Hintergrundfarbwert #d3d3d3	Verlauf nach Weiß		Verlauf nach Schwarz
Farbwert	:	#d3d3d3	#d3d3d3	#d3d3d3	#d3d3d3	#d3d3d3
Farbe	:	gray211	#d9d9d9	#d9d9d9	#b4b4b4	#b4b4b4
HTML	:	#d3d3d3	#dfdfdf	#dfdfdf	#969696	#969696
CSS	:	#d3d3d3	#e5e5e5	#e5e5e5	#787878	#787878
CSS (Wert)	:	#d3d3d3	#ececec	#ececec	#5a5a5a	#5a5a5a
CSS (kürzest)	:	#d3d3d3	#f2f2f2	#f2f2f2	#3c3c3c	#3c3c3c
CSS (RGB)	:	rgb(211,211,211)	#f8f8f8	#f8f8f8	#1e1e1e	#1e1e1e
CSS (%RGB)	:	rgb(82%,82%,82%)	#ffffff	#ffffff	#000000	#000000

Beispiele zu Kombinationen mit Farbwert #d3d3d3

Änderung der Unterstreichung bei Hover bei Tag h4

Eine Überschrift der 4. Stufe wird mit HTML-Tag <h4> gesetzt. Diese kann farblich gestaltet werden.

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

<style type="text/css"><!--
  h4 { 
    border-bottom-width:4px; 
    border-bottom-color:#5731d8; 
    border-bottom-style:double;
  }
//-->
</style>

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

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

Die Idee ist hierbei, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben. Manchmal sieht man diesen Effekt bei Hyperlinks. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Hierbei handelt es sich aber nicht um eine "normale" Unterstreichung, der Text ist nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und dieser Rahmen ist unabhängig vom Text.

Weiteres zum Thema können Sie in Grundlegende Gestaltungselemente in HTML nachsehen. Einzelheiten des hier verwendeten Tag h4 erfahren Sie in der HTML Referenz unter <h4>.

Farbige Unterstreichung bei HTML-Befehl acronym

In diesem Beispiel unterstreichen wir <acronym> mit einem gepunkteten Rahmen mit 4 Pixel Dicke in Farbwert #d3d3d3. Mit HTML ist dies kaum möglich. Daher formatieren wir mit CSS.

<style type="text/css"><!--
  acronym { 
    border-bottom-color: #d3d3d3; 
    border-bottom-width: 4px; 
    border-bottom-style: dotted;
  }
//-->
</style>

Die Idee ist, unabhängige Formatierungen für Inhalt und Unterstreichung zu nutzen. Öfter sehen Sie das bei Links. Der Text wird in einer Farbe dargestellt. Und die Unterstreichung in einer anderen. Hierbei handelt es sich aber nicht um eine wirkliche Unterstreichung, der Text hat überhaupt keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und dieser Rahmen ist unabhängig vom Text.

Weiteres zum hier genutzten HTML-Tag acronym ist in der HTML Referenz unter <acronym> ausführlich gezeigt.