Sunday, October 2, 2011

CSS3 LED icons

Here they are... pure CSS3 LED icons:







You may have to upgrade your browser if the LEDs aren't very shiny. In the meanwhile you can check out the source:



.led {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 6px;
}

.led.yellow {
background-color: #ffff00;
background-image: radial-gradient(50% -5%, circle closest-side, #ffffee, #ffff00 110%);
background-image: -webkit-radial-gradient(50% -5%, circle, #ffffee, #ffff00 110%);
background-image: -moz-radial-gradient(50% -5%, circle, #ffffee, #ffff00 110%);
box-shadow: 0px 0px 3px #ffff00;
}

.led.green {
background-color: #00ff00;
background-image: radial-gradient(50% -5%, circle closest-side, #eeffee, #00ff00 110%);
background-image: -webkit-radial-gradient(50% -5%, circle, #eeffee, #00ff00 110%);
background-image: -moz-radial-gradient(50% -5%, circle, #eeffee, #00ff00 110%);
box-shadow: 0px 0px 3px #00ff00;
}

.led.red {
background-color: #ff0000;
background-image: radial-gradient(50% -5%, circle closest-side, #ffeeee, #ff0000 110%);
background-image: -webkit-radial-gradient(50% -5%, circle, #ffeeee, #ff0000 110%);
background-image: -moz-radial-gradient(50% -5%, circle, #ffeeee, #ff0000 110%);
box-shadow: 0px 0px 3px #ff0000;
}

No comments:

Post a Comment