Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

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)

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe

BLACK-FRIDAY-WEEK Aktion