Ampel über CSS ohne Grafik erstellen

Nach den vorherigen CSS-Tutorials, wie man mit CSS eine Ausgabe zaubert, die wie eine Grafik aussieht, aber keine Grafik ist, erstellen wir als Ausgabe eine Ampel. Das Licht der Ampel (ob rot für halt oder grün für fahren) können wir über die Klasse steuern.

Anbei direkt der Code - die Bausweise ist identisch wie schon in den vorherigen Tutorials

Das notwendige HTML - jeweils für jede Ampelphase:

<span class="css-ampel ampelrot"><span></span></span>
<span class="css-ampel ampelgelb"><span></span></span>
<span class="css-ampel ampelgruen"><span></span></span>

und das zugehörige CSS

.css-ampel {
  display: inline-block;
  width: 30px;
  height: 90px;
  border-radius: 6px;
  position: relative;
  background-color: black;
  zoom: 1.7;
}

.css-ampel span,
.css-ampel:before,
.css-ampel:after {
    content: "";
    color: white;
    position: absolute;
    border-radius: 15px;
    width: 22px;
    height: 22px;
    left: 4px;
}    

.css-ampel:before {
    top: 6px;
    background-color: red;
    background-color: dimgrey;
}

.css-ampel:after {
    top: 34px;
    background-color: yellow;
    background-color: dimgrey;
}

.css-ampel span {
    top: 62px;
    background-color: green;
    background-color: dimgrey;
}    

.ampelrot:before {
    background-color: red;
    box-shadow: 0 0 20px red;
}

.ampelgelb:after {
    background-color: yellow;
    box-shadow: 0 0 20px yellow;
}

.ampelgruen span {
    background-color: limegreen;
    box-shadow: 0 0 20px limegreen;
}

2 Leuchten an

Über unsere CSS-Klassen können wir nun sehr einfach auch 2 Leuchten gleichzeitig einschalten:

<span class="css-ampel ampelrot ampelgelb"><span></span></span>

Animierte Ampel - rot soll blinken

.ampelrotblinkend:before {
    animation-name: rotblinkend;
    animation-timing-function: ease-in;
    animation-duration: 2s; 
    animation-iteration-count: infinite;    
} 
    
@keyframes rotblinkend {
    0% {  
        background-color: dimgrey;
    }
    30% {  
        background-color: dimgrey;
    }
    40% {  
        background-color: red;
        box-shadow: 0 0 20px red;
    }
    100% {  
        background-color: red;
        box-shadow: 0 0 20px red;
    }
}

Und das zugehörige HTML:

<span class="css-ampel ampelrotblinkend"><span></span></span>

PS: #klugscheisermodus - die korrekte Bezeichnung für Ampel ist Lichtsignalanlage (LSA) bzw. Lichtzeichenanlage (LZA)