Das klassische LED-Display zur Anzeige der Ziffern (englisch: digits) 0 bis 9 besteht aus sieben Segmenten bzw. länglichen LEDs, von denen sechs in einem Rechteck angeordnet sind und das siebte quer in der Mitte des Rechtecks liegt. Das oben liegende Elemente wird in der Regel mit A bezeichnet, dann folgen im Uhrzeigersinn B, C, D, E, F, und dem mittig liegenden Balken wird schließlich der Buchstabe G zugeteilt (dies wird später für den JavaScript-Teil wichtig, mit dem das zunächst statische CSS-Ziffern-Display aktiviert werden soll, um es als Counter oder Digitaluhr oder auch zur Anzeige von Spielständen zu nutzen).
Hier zunächst der HTML-Teil, das simple Grundgerüst zur Darstellung einer 7-Segment-Ziffer. Zur Abbildung mehrstelliger Zahlen müssen zum Schluss mehrere dieser DIV-Blöcke <div class="digit"> nebeneinander positioniert werden.
<!-- HTML -->
<div class="digit">
<div class="segment top"></div>
<div class="vertical">
<span class="segment left"></span>
<span class="segment right"></span>
</div>
<div class="segment middle"></div>
<div class="vertical">
<span class="segment left"></span>
<span class="segment right"></span>
</div>
<div class="segment bottom"></div>
</div>
Per CSS wird jedem DIV- und SPAN-Element mit der Klassifizierung class="segment" eine Hintergrundfarbe zugewiesen sowie eine konkrete Größe (den horizontal liegenden z. B. 20px x 100px, den vertikalen dann umgekehrt 100px x 20px). Für die Positionierung bietet sich das Flexbox-Modell an ("CSS Flexible Box Layout Module").
/* CSS */
.digit {
display: flex;
flex-direction: column;
align-items: center;
}
.digit .vertical {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.segment {
background: red;
}
.segment.top, .segment.bottom, .segment.middle {
width: 100px;
height: 20px;
}
.segment.left, .segment.right {
width: 20px;
height: 100px;
}
Das alles umschließende Digit-DIV wird per display: flex zum Flex-Container, in dem dank flex-direction: column alle Blöcke untereinander positioniert werden. Damit aber die vertikalen Balken parallel nebeneinander stehen, liegen sie in je einem Vertical-DIV, in dem per flex-direction: row die spaltenweise Anordnung wieder aufgehoben wird zugunsten der standartmäßigen Reihenordnung.
Wenn wir nun diesen beiden Vertikal-Blöcken eine konkrete Höhe und Breite zuordnen, lassen sich Lage und Abstand der Ziffern-Segmente zueinander wunderbar steuern. Die CSS-Anweisung justify-content: space-between sorgt dabei dafür, dass sich die nebeneinander stehenden Balken stets am linken und rechten Rand des umschließenden Vertikal-Blocks befinden.
By the way: Die CSS-Anweisung align-items: center sorgt im übergeordneten Digit-Container dafür, dass die Child-Blöcke an einer vertikal von oben nach unten verlaufenden Mittelachse ausgerichtet/zentriert werden. Der Grund: Das <div class="digit"> ist als Spalte (flex-direction: column) definiert. Bei den Vertikal-DIVs hingegen bewirkt align-items: center, dass sich die innen liegenden Balken an einer von links nach rechts verlaufenden Mittelachse orientieren.
Um schließlich ein ansehnliches Digitalziffern-Display zu schaffen, brauchs nur noch 'ne nette Farbkombination und z. B. abgerundete Kanten der Segmente/Balken. Mit der Variation der Helligkeit zwischen leuchtend (opacity: 1) und glimmend (opacity: 0.1) lässt sich der typische Effekt von LED-Anzeigen simulieren. Zudem werden nun mehrere Digit-Blöcke nebeneinander gestellt.
In einem zweiten Teil soll dies genauer 'beleuchtet' werden >> LED-Display - der Feinschliff.
