This is a simple example of using CSS to make 'LED' lights that can blink and do all sorts of things.
A Pen by F. Stephen Kirschbaum on CodePen.
Created
February 24, 2022 19:50
-
-
Save lushdomain/92ac4660181ceb07cd0926cf1ad9d6a6 to your computer and use it in GitHub Desktop.
CSS LED Lights
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <div class="led-box"> | |
| <div class="led-green"></div> | |
| <p>Green LED</p> | |
| </div> | |
| <div class="led-box"> | |
| <div class="led-yellow"></div> | |
| <p>Yellow LED</p> | |
| </div> | |
| <div class="led-box"> | |
| <div class="led-red"></div> | |
| <p>Red LED</p> | |
| </div> | |
| <div class="led-box"> | |
| <div class="led-blue"></div> | |
| <p>Blue LED</p> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $( function() { | |
| var $winHeight = $( window ).height() | |
| $( '.container' ).height( $winHeight ); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .container { | |
| background-size: cover; | |
| background: rgb(226,226,226); /* Old browsers */ | |
| background: -moz-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1))); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* IE10+ */ | |
| background: linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */ | |
| padding: 20px; | |
| } | |
| .led-box { | |
| height: 30px; | |
| width: 25%; | |
| margin: 10px 0; | |
| float: left; | |
| } | |
| .led-box p { | |
| font-size: 12px; | |
| text-align: center; | |
| margin: 1em; | |
| } | |
| .led-red { | |
| margin: 0 auto; | |
| width: 24px; | |
| height: 24px; | |
| background-color: #F00; | |
| border-radius: 50%; | |
| box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px; | |
| -webkit-animation: blinkRed 0.5s infinite; | |
| -moz-animation: blinkRed 0.5s infinite; | |
| -ms-animation: blinkRed 0.5s infinite; | |
| -o-animation: blinkRed 0.5s infinite; | |
| animation: blinkRed 0.5s infinite; | |
| } | |
| @-webkit-keyframes blinkRed { | |
| from { background-color: #F00; } | |
| 50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;} | |
| to { background-color: #F00; } | |
| } | |
| @-moz-keyframes blinkRed { | |
| from { background-color: #F00; } | |
| 50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;} | |
| to { background-color: #F00; } | |
| } | |
| @-ms-keyframes blinkRed { | |
| from { background-color: #F00; } | |
| 50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;} | |
| to { background-color: #F00; } | |
| } | |
| @-o-keyframes blinkRed { | |
| from { background-color: #F00; } | |
| 50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;} | |
| to { background-color: #F00; } | |
| } | |
| @keyframes blinkRed { | |
| from { background-color: #F00; } | |
| 50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;} | |
| to { background-color: #F00; } | |
| } | |
| .led-yellow { | |
| margin: 0 auto; | |
| width: 24px; | |
| height: 24px; | |
| background-color: #FF0; | |
| border-radius: 50%; | |
| box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 12px; | |
| -webkit-animation: blinkYellow 1s infinite; | |
| -moz-animation: blinkYellow 1s infinite; | |
| -ms-animation: blinkYellow 1s infinite; | |
| -o-animation: blinkYellow 1s infinite; | |
| animation: blinkYellow 1s infinite; | |
| } | |
| @-webkit-keyframes blinkYellow { | |
| from { background-color: #FF0; } | |
| 50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; } | |
| to { background-color: #FF0; } | |
| } | |
| @-moz-keyframes blinkYellow { | |
| from { background-color: #FF0; } | |
| 50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; } | |
| to { background-color: #FF0; } | |
| } | |
| @-ms-keyframes blinkYellow { | |
| from { background-color: #FF0; } | |
| 50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; } | |
| to { background-color: #FF0; } | |
| } | |
| @-o-keyframes blinkYellow { | |
| from { background-color: #FF0; } | |
| 50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; } | |
| to { background-color: #FF0; } | |
| } | |
| @keyframes blinkYellow { | |
| from { background-color: #FF0; } | |
| 50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; } | |
| to { background-color: #FF0; } | |
| } | |
| .led-green { | |
| margin: 0 auto; | |
| width: 24px; | |
| height: 24px; | |
| background-color: #ABFF00; | |
| border-radius: 50%; | |
| box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00 0 2px 12px; | |
| } | |
| .led-blue { | |
| margin: 0 auto; | |
| width: 24px; | |
| height: 24px; | |
| background-color: #24E0FF; | |
| border-radius: 50%; | |
| box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #006 0 -1px 9px, #3F8CFF 0 2px 14px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment