Skip to content

Instantly share code, notes, and snippets.

@oloman

oloman/dabblet.css

Created May 20, 2012 20:10
Show Gist options
  • Save oloman/2759394 to your computer and use it in GitHub Desktop.
Save oloman/2759394 to your computer and use it in GitHub Desktop.
Download ZIP
Semáforo CSS
Raw
dabblet.css
/* Semáforo CSS */
ul.semaforo {
position: relative;
width: 60px;
margin: 40px auto;
padding: 0;
list-style-type: none;
}
ul.semaforo li {
position: relative;
display: block;
float: left;
width: 20px;
height: 20px;
border-radius: 50%;
background: lightgrey;
}
.verde li:nth-of-type(1) {
border-color: limegreen;
background-color: limegreen;
background: radial-gradient(center, ellipse cover, #00ff00 1%, #32cd32 100%);
}
.naranja li:nth-of-type(2) {
border-color: orange;
background-color: orange;
background: radial-gradient(center, ellipse cover, #ffd700 1%, #ff8c00 100%);
}
.rojo li:nth-of-type(3) {
border-color: red;
background-color: red;
background: radial-gradient(center, ellipse cover, #ff0000 1%,#cc0000 100%);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<ul class="semaforo verde">
<li></li>
<li></li>
<li></li>
</ul>
<div style="clear:both;"></div>
<ul class="semaforo naranja">
<li></li>
<li></li>
<li></li>
</ul>
<div style="clear:both;"></div>
<ul class="semaforo rojo">
<li></li>
<li></li>
<li></li>
</ul>
Raw
settings.json
{"view":"separate","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment