Posts mit dem Label css3 werden angezeigt. Alle Posts anzeigen
Posts mit dem Label css3 werden angezeigt. Alle Posts anzeigen

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