Ressourcen: 256 Graustufen in HTML - Kombinationen mit Farbe gray48

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 gray48
Detail	:	Hintergrundfarbe gray48	Verlauf nach Weiß		Verlauf nach Schwarz
Farbe	:	gray48	#303030	#303030	#303030	#303030
Farbwert	:	#303030	#4d4d4d	#4d4d4d	#292929	#292929
HTML	:	gray48	#6b6b6b	#6b6b6b	#222222	#222222
CSS	:	gray48	#888888	#888888	#1b1b1b	#1b1b1b
CSS (Wert)	:	#303030	#a6a6a6	#a6a6a6	#141414	#141414
CSS (kürzest)	:	#303030	#c3c3c3	#c3c3c3	#0d0d0d	#0d0d0d
CSS (RGB)	:	rgb(48,48,48)	#e1e1e1	#e1e1e1	#060606	#060606
CSS (%RGB)	:	rgb(18%,18%,18%)	#ffffff	#ffffff	#000000	#000000

Beispiele zu Kombinationen mit Farbe gray48

Änderung der Unterstreichung bei Hover von Tag h3

Eine Überschrift setzen Sie mit Befehl <h3>. Diese kann farblich gestaltet und hervorgehoben werden.

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

Dafür stellen wir <h3> so ein, dass bei Mausberührung die Unterstreichungsfarbe auf Farbe gray48 geändert wird.

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

Weiteres zum Thema h3 können Sie in Grundlegende Gestaltungselemente in HTML nachsehen. Weiteres zum hier genutzten HTML-Befehl h3 ist in der HTML Referenz unter <h3> genau gezeigt.

Farbige Unterstreichung von Befehl address

Beispielsweise unterstreichen wir <address> mit Hilfe eines doppelten Rahmens mit 1 Pixel Dicke in Farbe gray48. Mit HTML ist das kaum möglich. Wir nutzen deshalb CSS zur Formatierung.

<style type="text/css"><!--
  address { 
    border-bottom-color:gray48; 
    border-bottom-width:1px; 
    border-bottom-style:double;
  }
//-->
</style>

Die Idee ist hierbei, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu verwenden. Öfter sieht man diesen Effekt bei Verweisen. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Es ist jedoch keine "normale" Unterstreichung, der Text selbst ist nicht unterstrichen. Sie wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Weiteres zu address können Sie in Blockorientierte Elemente in HTML erfahren. Der hier gezeigte Tag address ist in der HTML Referenz unter <address> gezeigt.