Ressourcen: 256 Graustufen in HTML - Kombinationen mit Farbe gray40

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 gray40
Detail	:	Hintergrundfarbe gray40	Verlauf nach Weiß		Verlauf nach Schwarz
Farbe	:	gray40	#282828	#282828	#282828	#282828
Farbwert	:	#282828	#464646	#464646	#222222	#222222
HTML	:	gray40	#656565	#656565	#1c1c1c	#1c1c1c
CSS	:	gray40	#848484	#848484	#161616	#161616
CSS (Wert)	:	#282828	#a2a2a2	#a2a2a2	#111111	#111111
CSS (kürzest)	:	#282828	#c1c1c1	#c1c1c1	#0b0b0b	#0b0b0b
CSS (RGB)	:	rgb(40,40,40)	#e0e0e0	#e0e0e0	#050505	#050505
CSS (%RGB)	:	rgb(15%,15%,15%)	#ffffff	#ffffff	#000000	#000000

Beispiele zu Kombinationen mit Farbe gray40

Farbige Unterstreichung mit Befehl a

Einen Link erzeugen Sie mit Befehl <a>. Dieser kann hervorgehoben und farblich gestaltet werden.

Beispielsweise unterstreichen wir <a> mit Hilfe eines gepunkteten Rahmens mit 1 Pixel Dicke in Farbe gray40. In HTML ist das kaum möglich. Wir nutzen deshalb CSS.

<style type="text/css"><!--
  a { border-bottom:1px dotted gray40; }
//-->
</style>

Die Idee ist hierbei, verschiedene Formatierungen für Inhalt und Unterstreichung zu verwenden. Manchmal sieht man dies bei Links. Der Text wird in einer Farbe dargestellt. Und 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 ist unabhängig vom Text.

Mehr zum Thema lesen Sie in Verweise und Protokolle in HTML. Einzelheiten des hier verwendeten HTML-Tag <a>.

Änderung der Unterstreichung bei Hover bei Tag blockquote

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

Dafür stellen wir <blockquote> so ein, dass bei Mausberührung die Farbe der Unterstreichung auf Farbe gray40 gesetzt wird.

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

Mehr zum Thema können Sie in Blockorientierte Elemente in HTML nachsehen. Einzelheiten vom hier gezeigten HTML-Befehl blockquote lesen Sie in der HTML Referenz unter <blockquote>.