Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

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.

2 Leuchten an: Ampel blinkt:

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)

weitere eigene Projekte: