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: