Semáforos: Indicadores de colores con CSS. 3 versiones | Oloblogger Esto comenzó inicialmente buscando una manera de incorporar a este blog algún sistema para marcar el...

24 de mayo de 2012

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.

Semáforos CSS

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:


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
Copy URL

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

follow us in feedly

14 comentarios :

  1. Cada vez alucino más con tus supuestas "tonterías" con CSS.

    ResponderEliminar
    Respuestas
    1. Y yo. Le estoy cogiendo el gustillo a esto ;)

      Eliminar
    2. Jajajajaaaa. Es verdad lo que dice Emilio, dices que haces tonterías o disparates, pero en realidad son cosas muy difíciles de hacer.

      Emilio:

      Es que eso es parte de la humildad de Oloman.

      Eliminar
  2. Pues a mí creo que me va a venir fantástico para mi blog de cocina. Así podré poner la dificultad de cada receta de una manera visual. A ver si tengo tiempo y lo implanto (o algo parecido). GENIAL. Saludos.

    ResponderEliminar
    Respuestas
    1. ¡Qué buen uso! Jaja, me has dado una idea... Podría poner un color u otro dependiendo de la dificultad de mis tutoriales... *Cara de pensante...*
      Bueno, mejor lo dejo todo como está que me da pereza *Yaoming*

      Eliminar
  3. Que barbaridad! Excelente Oloman, te has sacado la máxima calificación ;)

    ResponderEliminar
  4. ¡Colores, colorees! ¡¡Fiestaa!! Uy... Es que vengo de feria y estoy lleno de marcha en el cuerpo (¡¡¡oleee!!!! Pero sin beber, ¿eh? XD)
    Bueno termino esto rápido que si no me da un ataque que estoy escuchando para colmo una canción marchosa...
    Jaja, bueno pues buenísima entrada, la verdad que el CSS me sorprende bastante. La de cosas tan fantásticas que se pueden hacer con unas palabras...

    ResponderEliminar
  5. Oloman, pequeño detalle y ¿los daltónicos? (=.0)

    ResponderEliminar
    Respuestas
    1. Si no pones nada no lo verán ni los no-daltónicos ¿no?

      De todas formas esta es sólo una idea de partida, la puedes utilizar con otros efectos en lugar de colores o por ejemplo rellenando el content con una letra, un número, una imagen...

      Eliminar
  6. Excelente idea amigo!!! Solo una pregunta, tienes alguna idea de como hacer para que el semaforo cambie de color solo?

    ResponderEliminar
    Respuestas
    1. No sé... ¿Te refieres a que el semáforo se convierta en una discoteca y que vaya cambiando de color solo automáticamente o que lo haga en función de algo?

      Eliminar
  7. Muy buena información. ¿Cómo podría hacerse de que el semáforo cambie su color en función de alguna variable?. Saludos.

    ResponderEliminar
    Respuestas
    1. Para eso ya habría que utilizar JavaScript, Paolo. El sistema tendría que insertar la clase (el color) deseado en función del contenido de esa variable.

      Eliminar