Seguimos valorando cosas con semáforos CSS de colores

El otro día vimos cómo hacer una especie de semáforo que nos permitiera marcar elementos de nuestra web con un código de colores. Allí usábamos un sistema basado en una lista que nos facilitaba tener elementos ilimitados de color, pero que no nos dejaba demasiada libertad para usar distintos colores en distintas posiciones.

Freepick

En este caso en lugar de listas usaremos un div simple, para lo que no se me ocurrió otra cosa mas que utilizar :after y :before. Alguno ya puede imaginar que con esto no podremos obtener más de tres círculos y así es, pero sin embargo podremos usar muchísimos colores.


El código CSS sería este:

.semaforo,
.semaforo:before,
.semaforo:after {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background: lightgrey;
margin: 0 auto;
}
.semaforo:before {
position: absolute;
left: -100px;
content: "";
}
.semaforo:after {
position: absolute;
right: -100px;
content: "";
}
.verde:before {background: limegreen;}

.naranja {background: orange;}

.rojo:after {background: red;}

¿Imagináis lo que se verá si escribimos simplemente <div class="semaforo verde"></div>?

Este sería el resultado de <div class="semaforo rojo verde naranja"></div>

La manera de crear más colores siempre estará limitada por la imposibilidad de repetir colores en distinta posición. Es decir, en el centro pueden ir tantos colores como queramos pero esos quedarán excluidos para derecha e izquierda porque el navegador daría prioridad al que pusiéramos en último lugar en la hoja de estilo. De la misma manera, los que usemos para la derecha no podrán ir ni en el centro ni en la izquierda y análogamente con los de la izquierda.


De esta manera, para añadir más colores tendríamos que decidir dónde queremos que aparezcan cuando los usemos, incorporando la clase correspondiente (centro), la clase con :before (izquierda) o la clase con :after (derecha). La parte dónde definimos los colores de fondo sería la que habría que ir ampliando:

.verde:before {background: limegreen;}
.azul:before {background: blue;}

.naranja {background: orange;}
.amarillo {background: yellow;}

.rojo:after {background: red;}
.violeta:after {background: purple;}

<div class="semaforo azul violeta amarillo"></div>

Obviamente, si así lo necesitamos, podemos usar los efectos de gradientes y sombras que aplicamos en la anterior entrada con el fin de dar más realismo a los círculos, añadiendo por ejemplo este estilo en la primera definición:

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;

Una variante de este último código que sí que nos permitiría usar cualquier color en cualquier sitio sería la siguiente. Ahora lo que hacemos es usar diferentes nombres de clase según la posición dónde queremos que se muestre cada uno. Para fines nemotécnicos, a las que irán a la izquierda le hemos añadido una i y a las de la derecha una d. El resto son para el centro.

.verde {background: limegreen;}
.naranja {background: orange;}
.rojo {background: red;}
.azul {background: blue;}
.amarillo {background: yellow;}
.violeta {background: purple;}

.verdei:before {background: limegreen;}
.naranjai:before {background: orange;}
.rojoi:before {background: red;}
.azuli:before {background: blue;}
.amarilloi:before {background: yellow;}
.violetai:before {background: purple;}

.verded:after {background: limegreen;}
.naranjad:after {background: orange;}
.rojod:after {background: red;}
.azuld:after {background: blue;}
.amarillod:after {background: yellow;}

Ahora con escribir <div class="semaforo naranja violetai rojod "></div> o <div class="semaforo amarillo rojoi rojod "></div> nos aparecerá esto:

Otro Dabblet para ver esto último: Otro semáforo CSS

---

Una última cosa. Si queréis máxima compatibilidad con las distintas versiones de navegadores, deberéis añadir antes de las propiedades box-shadow, border-radius, linear-gradient y radial-gradient (cuando se usen), la misma propiedad pero con los prefijos que ya hemos visto en otras ocasiones. Esto es para las dos entradas que hemos visto sobre el tema. Ejemplo:

-o-border-radius: 50%;
-webkit-border-radius: 50%;
-mox-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;

¿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