Semáforo realista CSS

dabblet.css

/* Semáforo realista CSS */

ul.semaforo {
float:left;
position: relative;
width: 100px;
margin: 0 50px;
padding: 15px;
list-style-type: none;
border: 6px double grey;
background: black;
background: linear-gradient( -90deg, #45484d 0%, #000000 100%);
border-radius: 20%;
box-shadow: 0px 0px 0 20px rgba(0,0,0,.8);
}
ul.semaforo li {
position:relative;
width: 100px;
height: 100px;
border-radius: 50%;
background: lightgrey;
margin: 10px 0;
background: linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4),
inset -2px -1px 40px rgba(0,0,0,0.4),
0 0 1px #000;
}
ul.semaforo li:after {
content: "";
width: 60px;
height: 30px;
position: absolute;
left: 20px;
top: 10px;
box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
border-radius: 30px / 15px;
}
.rojo li:nth-of-type(1) {
background: #cc0000;
background: radial-gradient(center, ellipse cover, #ff0000 1%, #cc0000 100%);
}
.naranja li:nth-of-type(2) {
background: #FF9326;
}
.verde li:nth-of-type(3) {
background: #00ff00;
}

dabblet.html

<!-- HTML -->

<!-- Cambia el color en la clase por verde, naranja o rojo -->
<ul class="semaforo verde">
<li></li>
<li></li>
<li></li>
</ul>

<ul class="semaforo verde naranja">
<li></li>
<li></li>
<li></li>
</ul>

<ul class="semaforo rojo">
<li></li>
<li></li>
<li></li>
</ul>

settings.json

{"view":"separate","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}