Ressourcen: 256 Graustufen in HTML - Kombinationen mit Farbe gray154

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 gray154
Detail	:	Hintergrundfarbe gray154	Verlauf nach Weiß		Verlauf nach Schwarz
Farbe	:	gray154	#9a9a9a	#9a9a9a	#9a9a9a	#9a9a9a
Farbwert	:	#9a9a9a	#a8a8a8	#a8a8a8	#848484	#848484
HTML	:	gray154	#b6b6b6	#b6b6b6	#6e6e6e	#6e6e6e
CSS	:	gray154	#c5c5c5	#c5c5c5	#585858	#585858
CSS (Wert)	:	#9a9a9a	#d3d3d3	#d3d3d3	#424242	#424242
CSS (kürzest)	:	#9a9a9a	#e2e2e2	#e2e2e2	#2c2c2c	#2c2c2c
CSS (RGB)	:	rgb(154,154,154)	#f0f0f0	#f0f0f0	#161616	#161616
CSS (%RGB)	:	rgb(60%,60%,60%)	#ffffff	#ffffff	#000000	#000000

Beispiele zu Kombinationen mit Farbe gray154

Farbige Unterstreichung von Tag cite

In diesem Beispiel unterstreichen wir <cite> mit Hilfe eines herausstehenden Rahmens mit 5 Pixel Dicke in Farbe gray154. Dies ist in HTML kaum möglich. Wir verwenden daher CSS zur Formatierung.

<style type="text/css"><!--
  cite { border-bottom:5px outset gray154; }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu nutzen. Manchmal sehen Sie diesen Effekt bei Hyperlinks. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Es ist aber keine "wirkliche" Unterstreichung, der Text selbst ist gar nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und dieser Rahmen ist unabhängig vom Text.

Weiteres zum HTML-Tag cite ist in der HTML Referenz bei <cite> genau zusammengestellt.

Änderung der Unterstreichung bei Hover mit Tag acronym

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

<style type="text/css"><!--
  acronym { 
    border-bottom-width: 2px; 
    border-bottom-color: #63bb61; 
    border-bottom-style: inset;
  }
//-->
</style>

Nun stellen wir ein, dass bei Hover die Unterstreichungsfarbe auf Farbe gray154 gesetzt wird.

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

Die Idee ist dabei, verschiedene Formatierungen für Inhalt und Unterstreichung zu haben. Öfter sieht man diesen Effekt bei Hyperlinks. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Hierbei handelt es sich aber nicht um eine normale Unterstreichung, der Text selbst hat überhaupt keine Unterstreichung. Sie wird mit einem Rahmen simuliert und dieser Rahmen ist unabhängig vom Text.

Die Beschreibung des Befehl acronym erfahren Sie in der HTML Referenz unter <acronym>.