Ressourcen: 256 Graustufen in HTML - Kombinationen mit Farbe gray15

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 gray15
Detail	:	Hintergrundfarbe gray15	Verlauf nach Weiß		Verlauf nach Schwarz
Farbe	:	gray15	#0f0f0f	#0f0f0f	#0f0f0f	#0f0f0f
Farbwert	:	#0f0f0f	#313131	#313131	#0c0c0c	#0c0c0c
HTML	:	gray15	#535353	#535353	#0a0a0a	#0a0a0a
CSS	:	gray15	#757575	#757575	#080808	#080808
CSS (Wert)	:	#0f0f0f	#989898	#989898	#060606	#060606
CSS (kürzest)	:	#0f0f0f	#bababa	#bababa	#040404	#040404
CSS (RGB)	:	rgb(15,15,15)	#dcdcdc	#dcdcdc	#020202	#020202
CSS (%RGB)	:	rgb(5%,5%,5%)	#ffffff	#ffffff	#000000	#000000

Beispiele zu Kombinationen mit Farbe gray15

Änderung der Hintergrundfarbe bei Hover von Tag h2

Eine Überschrift der 2. Stufe erzeugt man mit Befehl <h2>. Diese können Sie farblich gestalten und hervorheben.

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

Dafür stellen wir <h2> so ein, dass bei Berührung mit der Maus die Hintergrundfarbe auf Farbe gray15 geändert wird.

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

Weiteres zu h2 finden Sie in Grundlegende Gestaltungselemente in HTML. Möglichkeiten des Befehl h2 sind in der HTML Referenz unter <h2> ausführlich gezeigt.

Farbige Unterstreichung bei HTML-Tag blockquote

Beispielsweise unterstreichen wir <blockquote> mit einem einfallenden Rahmen mit 4 Pixel Dicke in Farbe gray15. Mit HTML geht das nicht. Daher verwenden wir CSS.

<style type="text/css"><!--
  blockquote { 
    border-bottom-width:4px; 
    border-bottom-style:inset; 
    border-bottom-color:gray15;
  }
//-->
</style>

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

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