Ressourcen: 256 Graustufen in HTML - Kombinationen mit Farbe gray144

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 gray144
Detail	:	Hintergrundfarbe gray144	Verlauf nach Weiß		Verlauf nach Schwarz
Farbe	:	gray144	#909090	#909090	#909090	#909090
Farbwert	:	#909090	#9f9f9f	#9f9f9f	#7b7b7b	#7b7b7b
HTML	:	gray144	#afafaf	#afafaf	#666666	#666666
CSS	:	gray144	#bfbfbf	#bfbfbf	#525252	#525252
CSS (Wert)	:	#909090	#cfcfcf	#cfcfcf	#3d3d3d	#3d3d3d
CSS (kürzest)	:	#909090	#dfdfdf	#dfdfdf	#292929	#292929
CSS (RGB)	:	rgb(144,144,144)	#efefef	#efefef	#141414	#141414
CSS (%RGB)	:	rgb(56%,56%,56%)	#ffffff	#ffffff	#000000	#000000

Beispiele zu Kombinationen mit Farbe gray144

Farbige Unterstreichung mit Tag blockquote

Beispielsweise unterstreichen wir <blockquote> mit einem einfallenden Rahmen mit 2 Pixel Dicke in Farbe gray144. In HTML geht dies nicht. Wir verwenden daher CSS zur Formatierung.

<style type="text/css"><!--
  blockquote { border-bottom:2px inset gray144; }
//-->
</style>

Die Idee ist hierbei, verschiedene Formatierungen für Inhalt und Unterstreichung zu haben. Manchmal sieht man diesen Effekt bei Verweisen. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine "wirkliche" Unterstreichung, der Text selbst hat keine Unterstreichung. Sie wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zum Thema blockquote lesen Sie in Blockorientierte Elemente in HTML. Der Befehl blockquote ist in der HTML Referenz unter <blockquote> genau zusammengestellt.

Änderung der Hintergrundfarbe bei Hover mit Befehl em

Die Hintergrundfarbe soll sich ändern, wenn man mit der Maus darauf zeigt.

Dafür stellen wir <em> so ein, dass sich bei Mausberührung die Hintergrundfarbe auf Farbe gray144 ändert.

<style type="text/css"><!--
  em:hover { 
    background-color:gray144;
  }
//-->
</style>

Weiteres zum Thema em finden Sie in Text in HTML. Zur Beschreibung vom Tag <em>.