Mi, 11 Dez 2024 14:34:49 +0100

Leuchtdioden (LEDs) mit HTML / CSS anzeigen

-


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>

image_pdfimage_print
Andreas Potthoffhttps://electrodrome.net
Computer-Nerd seit der ersten 8-bit Generation (1981), SysOp, IT-Spezialist, System Administrator, Webmaster... Wenn Sie mich unterstützen möchten, um dieses Projekt am Leben zu erhalten, verwenden Sie bitte die Amazon Affiliate-Links, den Paypal-Spenden-Link oder die Amazon Wunschliste. Vielen Dank für den Community Support!

2 Kommentare

1 1 vote
Artikel Bewertung
Datenschutz
2 Kommentare
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Rocky
Gast
Reply to  Andreas Potthoff
4 Jahre zuvor

Prima. THX!

--- WERBUNG ---

Related Stories

2
0
Would love your thoughts, please comment.x