2.7 C
Münster
Mittwoch, 19. Januar 2022, 08:25:29 CET +01:00

Leuchtdioden (LEDs) mit HTML / CSS anzeigen

image_pdfimage_print

Letztes Update am So, 26 Dez 2021 13:25:46 +0100 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>

image_pdfimage_print
Andreas Potthoffhttps://electrodrome.net
Admin & Computer-Nerd

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, um diesen Blog am Leben zu erhalten. Oder verwenden Sie hier den Paypal- oder Amazon Wunschlisten-Link um mich zu unterstützen. Vielen Dank!
Paypal Spende | Wunschliste | Github - Repositories | Github Gist - Snippets
--- Werbung ---

HINTERLASSEN SIE EINE ANTWORT

Please enter your comment!
Please enter your name here
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

--- Werbung ---

Letzte Artikel