Semáforos: Indicadores de colores con CSS. 3 versiones

Esto comenzó inicialmente buscando una manera de incorporar a este blog algún sistema para marcar el nivel de dificultad de las cosas publicadas. Ya sabéis: fácil, medio o difícil.

El caso es que lo primero (y único) que se me pasó por la cabeza fue usar una especie de código gráfico, tipo semáforo, para indicar esos distintos niveles mediante colores. Pero me fui liando, liando y terminé con alguna cosa más y sobre todo con esto que veis a continuación. Es una imagen jpg, pero juro por la batería de mi iPhone que está hecho con CSS. Lo veremos después.

Como decía, lo de los colores puede servir para marcar de una manera gráfica distintos niveles de dificultad, pero también podría servir para una codificación de preferencias, recomendaciones, valoración de artículos, opiniones de películas y en general, para calificar cualquier otra cosa que se os ocurra.


Alguno se preguntará que por qué no hago una imagen, la pego en el post y me dejo de gaitas, pero además de que esto es simple aprendizaje recreativo, encontré varios inconvenientes en eso cuando estaba desarrollando la idea de los niveles de dificultad.

Para empezar tendría que diseñar varias imágenes: verde, naranja, rojo, verde-naranja, naranja-rojo y verde-naranja-rojo, en total seis combinaciones posibles. Luego tendría que tener alojadas esas seis imágenes en algún sitio que me quedara a mano y cada vez que publicara un post, tendría que acudir allí para copiar y pegar la dirección de la que me interesara. E insisto en lo de cada vez.

Como problema añadido, si deseaba en el futuro cambiar el modelo de imagen tendría que volver a repetir todo el proceso, desde el diseño hasta el alojamiento y lo peor, modificar todos los posts con semáforos o renunciar a ello y dejarlos como quedaran. Si quisiera ampliar el número de luces para tener una gama más amplia de colores, pues ocurriría lo mismo. En fin, una complicación grande de cara al futuro.


La ventaja de utilizar CSS es la habitual de este lenguaje: codifico una vez y luego con capas y clases voy construyendo lo que quiera. Si quiero cambiar el diseño sólo tengo que cambiar las propiedades y todas las "imágenes" se actualizarán automáticamente.


El código básico para crear los círculos sería este:

ul.semaforo {
position: relative;
width: 100px; /* para 5 (ancho li x nº de círculos total) */
margin: 10px auto;
padding: 0;
list-style-type: none;
}
ul.semaforo li {
position: relative;
display: block;
float: left;
width: 20px; /* ancho de cada círculo */
height: 20px;
border-radius: 50%;
background: lightgrey;
}

Con eso y este HTML conseguiríamos una serie de círculos grises; tantos como elementos de lista (li) añadamos:

<ul class="semaforo">
<li></li>
<li></li>
...
</ul>
<div style="clear: both;"></div>

El toque mágico CSS consistiría en añadir las clases de los colores a usar, asociados con la pseudoclase :nth-of-type(n). Esto nos permitirá asignar secuencialmente a cada elemento de la lista un color diferente:

.rojo li:nth-of-type(1) {
background: #cc0000;
}
.naranja li:nth-of-type(2) {
background: #FF9326;
}
.verde li:nth-of-type(3) {
background: #00ff00;
}
.azul li:nth-of-type(4) {
background: #3366ff;
}
.amarillo li:nth-of-type(5) {
background: #ffff00;
}

Con esto ya sólo tenemos que añadir a <ul class="semaforo"> el color que deseamos mostrar. Así, con <ul class="semaforo naranja"> el resultado sería este:

Y con <ul class="semaforo azul"> este otro:

También se podrían combinar varios colores, mostrándose cada uno en la posición definida: <ul class="semaforo verde rojo amarillo">

O todos: <ul class="semaforo verde rojo amarillo azul naranja">

---

Como decía antes, cambiando las propiedades CSS se puede cambiar todo el aspecto de una vez y así, colocándole un fondo al contenedor general, cambiando un poco el estilo a la lista para que los círculos queden en vertical y añadiendo algunas sombras y gradientes, me salió esto otro que es lo mismo que mostraba al principio de la entrada.

Las sombras para dar realismo a las luces las saqué de este post que casualmente publicó hace unos días Codrops y que me vino fenomenal para rematar el diseño que tenia a medias.

En estos sí que podéis seleccionar zonas con el puntero para comprobar que efectivamente es CSS y no una imagen:

En este botón podéis desplegar el código para verlo:

Ver/Ocultar

<!-- Cambia el color en la clase por verde, naranja o rojo (también combinados) -->
<ul class="semaforo verde">
<li></li>
<li></li>
<li></li>
</ul>

/* Semáforo CSS vertical */

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: #ff0000;
}
.naranja li:nth-of-type(2) {
background: #ff9933;
}
.verde li:nth-of-type(3) {
background: #00ff00;
}

Obviamente, si cambiamos el ancho y alto de los círculos o los colores de cada elemento de la lista, podremos adaptar este cacharrito a nuestras necesidades particulares. Se trata de un sistema de valoración o marcaje subjetivo que cada cual tendrá que añadir a los elementos que crea necesario de la manera que guste, así que de todo esto sólo debéis tomar la idea y la mecánica de construcción.

Para además de ver el código poder experimentar sobre él las modificaciones que gustéis, este es el Dabblet del primer ejemplo y este el del segundo.


En el título anuncié 3 versiones, pero la entrada está quedando demasiado densa así que la que falta la dejaré para otro día. La idea será utilizar :after y :before para construir una señal de sólo tres cuerpos circulares, pero veremos también la forma de compensar esa limitación explicando un sistema que nos permitirá usar cualquier color en cualquiera de los círculos indistintamente.

Por cierto. No tengo iPhone así que no sé si debéis creerme con lo que escribo.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter