Leuchtdioden (LEDs) mit HTML / CSS anzeigen

geschrieben von Andreas Potthoff | 27. April 2017

Hier eine Möglichkeit LEDs mit HTML und CSS zu realisieren:

HTML

Die HTML Container für die Anzeige der jeweiligen LED-Farbe:

<div class="led-red"></div>
<div class="led-yellow"></div>
<div class="led-green"></div>
<div class="led-blue"></div>
<div class="led-grey"></div>

CSS

Die entprechende CSS-Datei für die LEDs:

.led-red {
    margin: 5px auto;
    width: 12px;
    height: 12px;
    background-color: #940;
    border-radius: 50%;
    box-shadow: #000 0 -1px 7px 1px, inset #600 0 -1px 9px, #F00 0 2px 12px;
}

.led-yellow {
    margin: 5px auto;
    width: 12px;
    height: 12px;
    background-color: #A90;
    border-radius: 50%;
    box-shadow: #000 0 -1px 7px 1px, inset #660 0 -1px 9px, #DD0 0 2px 12px;
}

.led-green {
    margin: 5px auto;
    width: 12px;
    height: 12px;
    background-color: #690;
    border-radius: 50%;
    box-shadow: #000 0 -1px 7px 1px, inset #460 0 -1px 9px, #7D0 0 2px 12px;
}

.led-blue {
    margin: 5px auto;
    width: 12px;
    height: 12px;
    background-color: #4AB;
    border-radius: 50%;
    box-shadow: #000 0 -1px 7px 1px, inset #006 0 -1px 9px, #06F 0 2px 14px;
}

.led-grey {
    margin: 5px auto;
    width: 12px;
    height: 12px;
    background-color: #C0C0C0;
    border-radius: 50%;
    box-shadow: #000 0 -1px 7px 1px, inset #9A9 0 -1px 9px, #969 0 2px 14px;
}

Die Farbe grau habe ich selbst erstellt.

Die CSS-Datei im HTML Header laden:

<head>
....
<link rel="stylesheet" href="path_to_your_css/led.css">
</head>