Im ersten Teil "Die Basics" gings um den grundlegenden CSS-Aufbau einer Ziffer nach dem 7-Segment-Prinzip, wie wir es von klassischen LED-Ziffernanzeigen kennen. Nun wollen wir uns um die eigentliche Optik kümmern - der Feinschliff.
Zunächst sollen mehrere Ziffernblöcke aus dem ersten Teil nebeneinander positioniert werden. In HTML werden dazu mehrere (hier: vier) Digit-DIVs untereinander geschrieben und mit einem Wrapper-DIV umschlossen (der Übersicht halber fehlt das Innere der Digit-DIVs hier zunächst):
<!-- HTML --> <div class="wrapper"> <div class="digit"> ... </div> <div class="digit"> ... </div> <div class="digit"> ... </div> <div class="digit"> ... </div> </div>
Um die Einzelziffern nun nebeneinander zu positionieren, wird der umschließende Wrapper per CSS zum Flex-Container mit flex-direction: row (das ist die Standart-Einstellung und kann daher auch weggelassen werden). Außerdem sorgt justify-content: space-around dafür, dass sich die Ziffern-Blöcke gleichmäßig über die Wrapper-Breite verteilen.
/* CSS */
.wrapper {
display: flex;
flex-direction: row;
justify-content: space-around;
}
Inklusive der CSS- und HTML-Teile aus dem vorangegangen Beitrag sieht's dann so aus:
<style>
/* CSS */
.wrapper {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.digit {
display: flex;
flex-direction: column;
align-items: center;
}
.digit .vertical {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 120px;
}
.segment {
background: red;
}
.segment.top, .segment.bottom, .segment.middle {
width: 100px;
height: 20px;
}
.segment.left, .segment.right {
width: 20px;
height: 100px;
}
</style>
<!-- HTML -->
<div class="wrapper">
<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>
<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>
<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>
<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>
</div>
Auf dem Bildschirm erscheint es dann zunächst so (Höhe und Breite der Segmente können selbstverständlich nach Belieben variiert werden):
Und nun zum Feinschliff
Um hieraus nun ein ansehnliches LED-Display zu machen, erhält der Wrapper eine dunkle Hintergrundfarbe und etwas Padding (dadurch verringert sich auch der Abstand der Ziffern zueinander). Die Ziffernsegmente erhalten abgerundete Kanten (z. B. border-radius: 8px) und eine 'leuchtende' Farbe, die allerdings zunächst per opacity: 0.2 deutlich reduziert wird, um sie nur leicht durchscheinen zu lassen. Durch eine zusätzliche CSS-Klasse, nennen wir sie "bright", die nur ausgesuchten Segmenten eines Ziffern-DIVs zugeordnet wird, erhöhen wir dann die Leuchtkraft per opacity: 1.0 wieder (dies wird später dynamisch mittels JavaScript gemacht).
Abgerundete Kanten mögen ganz nett sein, typisch für ein klassisches LED-Ziffern-Display sind aber eher eckige Kanten. Hierzu ergänzen wir die Balken ("bar") links und rechts (bzw. oben und unten bei den senkrecht stehenden) um je ein Dreieck ("triangle"):
<style>
/* CSS */
.digitTrapezoid {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.digitTrapezoid .vertical {
display: flex;
align-items: center;
justify-content: space-between;
width: 104px;
height: 64px;
}
.segmentTrapezoid {
display: flex;
}
.segmentTrapezoid.left,
.segmentTrapezoid.right {
flex-direction: column;
}
.bar {
background: red;
}
.top .bar, .bottom .bar, .middle .bar {
width: 60px;
height: 20px;
}
.left .bar, .right .bar {
width: 20px;
height: 60px;
}
.triangleA {
border-left: 20px solid transparent;
border-right: 0px solid transparent;
border-top: 20px solid darkred;
}
.triangleA.n2 {
transform: rotate(-90deg);
}
.triangleA.n3 {
transform: rotate(90deg);
}
.triangleA.n4 {
transform: rotate(180deg);
}
.triangleB {
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent darkred transparent transparent;
}
.triangleB.N2 {
transform: rotate(180deg);
}
.triangleB.N3 {
transform: rotate(-90deg);
}
.triangleB.N4 {
transform: rotate(90deg);
}
</style>
<!-- HTML -->
<div class="digitTrapezoid">
<div class="segmentTrapezoid top">
<span class="triangleA"></span><span class="bar"></span><span class="triangleA n2"></span>
</div>
<div class="vertical">
<div class="segmentTrapezoid left">
<span class="triangleA n4"></span><span class="bar"></span><span class="triangleB N3"></span>
</div>
<div class="segmentTrapezoid right">
<span class="triangleA n3"></span><span class="bar"></span><span class="triangleB N3"></span>
</div>
</div>
<div class="segmentTrapezoid middle">
<span class="triangleB"></span><span class="bar"></span><span class="triangleB N2"></span>
</div>
<div class="vertical">
<div class="segmentTrapezoid left">
<span class="triangleB N4"></span><span class="bar"></span><span class="triangleA n2"></span>
</div>
<div class="segmentTrapezoid right">
<span class="triangleB N4"></span><span class="bar"></span><span class="triangleA"></span>
</div>
</div>
<div class="segmentTrapezoid bottom">
<span class="triangleA n3"></span><span class="bar"></span><span class="triangleA n4"></span>
</div>
</div>
Eine Ziffer sieht dann folgendermaßen aus:
…und ein gestyltes Digitaldisplay, diesmal in Art einer Digitaluhr-Anzeige:
