Sonntag, 2. Oktober 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;
}