Last Update am Do, 19 Mrz 2020 12:53:09 +0100 by 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>
--- Werbung ---
Vorheriger ArtikelWie kann ich in Python den Ticker der Push API (WAMP) von Poloniex abonnieren?
Nächster ArtikelWie kann ich einen Page Reload mit JavaScript machen?
Admin & ComputerNerd

Github - Repositories
Github Gist - Snippets
Wenn Sie mich unterstützen möchten, verwenden Sie bitte die Amazon-Links in den Artikeln (wenn vorhanden), um Ihren Einkauf zu starten. Es entstehen keine zusätzlichen Kosten für Sie, aber ich bekomme eine kleine Provision (für Ihre Einkäufe in den nächsten 24 Stunden), um neue Hardware für neue Projekte zu kaufen. Oder verwenden Sie den Paypal-Button. Vielen Dank!

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein