Ressourcen: 16 Graustufen in HTML - Kombination von Farbwert #999999 und Farbwert #777777

Graustufen enthalten insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 16 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 15 (d.h. hexadezimal 0 bis f) für r, g und b.

Beispiele zur Kombination von Farbwert #999999 und Farbwert #777777

Zebra-Effekt bei Befehl th

Man spricht von einem Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Er unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <th> mit den Hintergrundfarben Farbwert #999999 und Farbwert #777777.

<style type="text/css"><!--
  th.ung { 
    background-color:#999999;
  }
  th.ger { 
    background-color:#777;
  }
//-->
</style>

Diese CSS-Klassen werden dann abwechselnd genutzt.

<table>
<tr><td class="ung">Oa~a</td><td class="ger">Ob~a</td><td class="ung">Oc~a</td></tr>
<tr><td class="ung">Oa~b</td><td class="ger">Ob~b</td><td class="ung">Oc~b</td></tr>
<tr><td class="ung">Oa~c</td><td class="ger">Ob~c</td><td class="ung">Oc~c</td></tr>
</table>

Mehr zum Thema th erfahren Sie in Tabellen in HTML. Der hier gezeigte HTML-Befehl th ist in der HTML Referenz bei <th> genau gezeigt.

Füllen und Umranden mit HTML-Tag frame

Hier umranden wir <frame> mit einem 4 Punkte dicken, gestrichelten Rahmen in Farbwert #777777 . Die Hintergrundfarbe für <frame> setzen wir auf Farbwert #999999. Mit HTML ist dies kaum machbar. Daher formatieren wir hier mit CSS.

<style type="text/css"><!--
  frame { 
    border-color:#777777; 
    border-width:4pt; 
    background-color:#999; 
    border-style:dashed;
  }
//-->
</style>

Weiteres zum hier genutzten Tag frame erfahren Sie in der HTML Referenz unter <frame>.