Letztes Update am Do, 27 Apr 2023 02:15:14 +0200 von Andreas Potthoff
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>
- Autor: devilsbackyard
- License: Open Source
- Quelle: cssdeck.com/labs/css-leds
Mir fehlte eine inaktive (nicht leuchtend) LED. Da habe ich die graue LED hinzugefügt.
Prima. THX!