Conjunto de íconos usando sólo CSS

JMiur

Este es otro de esos experimentos que muestran la potencia del CSS3 y fue desarrollado por Nicolas Gallagher; se trata de una serie de íconos para diferentes opciones, comentarios, tipos de archivo, reproducción de audio o video, etc.

A primera vista parecería complejo pero no lo es tanto ya que, una vez definidas las clases CSS, usarlas es muy sencillo e incluso, con algo de paciencia, podemos modificarlas un poco y jugar con diseños nuevos.

Lamentablemente, como todo este tipo de experimentos, funcionará en Firefox, Chrome, Safari y Opera pero no en Internet Explorer así que su aplicación está bastante restringida aunque nada impide utilizarla ya que en IE8 se ve ... razonablemente bien (no se verán redondeces) y quien use versiones anteriores sólo verá el texto ya que usa pseudo-elementos que no están disponibles en esas versiones inferiores.

Para intentar esto hay que mirar la página original y ver los ejemplos. En este caso, he tomado tres y modificado un poco la estructura para simplificarla a los efectos del demo. Acá, uso una etiqueta SPAN pero, podría ser cualquier otra, claro. Defino entonces una clase genérica para esa etiqueta:

.iconos {
  color: #ABC;
  display: inline-block;
  font-size: 17px;
  font-family: Tahoma;
  overflow: hidden;
  padding: 0 0 0 24px;
  position: relative;
}
.iconos:hover { color: #DEF; }
.iconos:before, .iconos:after {
  background-color: #ABC;
  content: "";
  left: 0;
  margin: 0;
  position: absolute;
  top: 50%;
}
.iconos:hover:before, .iconos:focus:before, .iconos:active:before { background-color: #DEF; }

Y ahora, las reglas de estilo que "dibujarán" cada ícono.

/* COMENTARIOS */
.comentario:before {
  height: 12px;
  margin-top: -8px;
  width: 16px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
}
.comentario:after {
  background-color: transparent;
  border-color: #ABC transparent transparent #ABC;
  border-right: 2px solid transparent;
  border-style: solid;border-width:2px;
  left: 8px;
  margin-top: 4px;
}
.comentario:hover:after, .comentario:focus:after, .comentario:active:after {
  border-left-color: #DEF;
  border-top-color: #DEF;
}

/* VIDEOS */
.video:before {
  height: 12px;
  left: 2px;
  margin-top: -6px;
  width: 14px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
.video:after {
  background-color: transparent;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 6px 5px 0;
  border-right- color:#ABC;
  left: 14px;
  margin-top: -5px;
}
.video:hover:after,.video:focus:after,.video:active:after { border-right-color: #DEF; }

/* INFO */
.info { color: #73D5FA;}
.info:before {
  background: #73D5FA;
  color: #FFF;
  content: "i";
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
  height: 16px;
  left: 3px;
  line-height: 15px;
  margin-top: -8px;
  text-align: center;
  width: 16px;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
  border-radius: 16px;
}
.info:hover { color: #73D5FA; }
.info:hover:before, .info:focus:before, .info:active:before { background-color: #73D5FA; }

Comentario Información Video