CSS LED Lights w3 html css course

Woarprss And Website And Blogger

Switch between dark and light mode with CSS and JavaScript, Colors are displayed combining RED, GREEN, and BLUE light. Color Names. With CSS, colors, Macau 6d HTML & CSS Crash Course: Learn html and css with easy to, Color Themes. With W3.CSS, it is easy to customize your applications with color themes. ... Light Blue. w3-theme-light-green.css, Color Theme Light Green

 

CSS LED Lights HTML, CSS, JS.

HTML
<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>

CSS
.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; }

JS
$( function() { var $winHeight = $( window ).height() $( '.container' ).height( $winHeight ); });

Demo