Ressourcen: 256 Graustufen in HTML - Kombinationen mit Farbwert #7a7a7a

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).

Hintergrundfarbwert #7a7a7a
Detail	:	Hintergrundfarbwert #7a7a7a	Verlauf nach Weiß		Verlauf nach Schwarz
Farbwert	:	#7a7a7a	#7a7a7a	#7a7a7a	#7a7a7a	#7a7a7a
Farbe	:	gray122	#8d8d8d	#8d8d8d	#686868	#686868
HTML	:	#7a7a7a	#a0a0a0	#a0a0a0	#575757	#575757
CSS	:	#7a7a7a	#b3b3b3	#b3b3b3	#454545	#454545
CSS (Wert)	:	#7a7a7a	#c6c6c6	#c6c6c6	#343434	#343434
CSS (kürzest)	:	#7a7a7a	#d9d9d9	#d9d9d9	#222222	#222222
CSS (RGB)	:	rgb(122,122,122)	#ececec	#ececec	#111111	#111111
CSS (%RGB)	:	rgb(47%,47%,47%)	#ffffff	#ffffff	#000000	#000000

Beispiele zu Kombinationen mit Farbwert #7a7a7a

Umrandung von Befehl hr

In diesem Beispiel umranden wir <hr> mit einem 3 Pixel dicken, gezahnten Rahmen in Farbwert #7a7a7a. Mit HTML geht das nicht. Wir nutzen daher CSS zur Formatierung.

<style type="text/css"><!--
  hr { 
    border-style:ridge; 
    border-color:#7a7a7a; 
    border-width:3px;
  }
//-->
</style>

Weiteres zum Thema hr können Sie in Grundlegende Gestaltungselemente in HTML erfahren. Mehr zum HTML-Befehl hr ist in der HTML Referenz bei <hr> ausführlich zusammengestellt.

Änderung der Hintergrundfarbe bei Hover von Befehl del

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

Für dieses Beispiel legen wir die Hintergrundfarbe von <del> auf Farbwert #7a7a7a fest. Zwar behalten wir die Textfarbe bei, setzen jedoch die Schriftart auf monospace und verkleinern die Schriftgröße auf 91%.

<style type="text/css"><!--
  del { 
    font-family:monospace; 
    font-size:91%; 
    background-color:#21ff54;
  }
//-->
</style>

Nun stellen wir ein, dass bei Hover die Hintergrundfarbe auf Farbwert #7a7a7a gesetzt wird.

<style type="text/css"><!--
  del:hover { 
    background-color:#7a7a7a;
  }
//-->
</style>

Weiteres zum hier genutzten Tag del ist in der HTML Referenz unter <del> genau beschrieben.