JMiur [E]

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

6 comentarios:

yonathan  

Hola men como estas muy buen post me gusto mucho no sabia qse podian hacer ese tipo de cosas xd aunque con las cosas de ahorita ya no me espero nada nuevo :P, por cierto unas preguntas espero no te molestes:

1.- tu mismo hicistes la plantilla para el blog?
2.-Si es asi podrias decirme los programas?
3.- todos las funciones q tiene este blog me imagino q son scrips y cosas asi no?

solo eso gracias :D

PD: solo pregunte esas cosas para saber no mas...

Responder
Graciela  

Me impresiona lo que consigue y tu cerebro para entenderlo :P

Responder
Adicto tv  

No se si me podrás ayudar, yo te ofrezco publicidad o lo que quieras en lo que yo te pueda servir. Te cuento; tengo un blog de tele y quiero cambiar la plantilla, pero no se adaptarla bien, porque es de las "complicadas". El blog es www.queridatele.blogspot.com y una de las plantillas que estoy barajando es una llamada "NewZine". Te estaría MUY agradecido. Espero respuesta.

Responder
JMiur  

yonathan
La plantilla original es esta; el resto, son modificaciones hechas a lo largo de más de cuatro años, la mayoría de las cuales están explicadas en las distintas entradas del blog.
Y no, no uso ningún programa.

Graciela:
Acá no hubo cerebro, solo un poco de copiar y juguetear :-D

Adicto tv:
No diseño plantillas, si hay algo concreto en lo que tengas dudas, me fijo y vemos.

Responder
Gem@  

Todos los días se aprende algo, me asombré la verdad :O

Responder
Adrián J. Messina  

¡Fenomenal! No me imaginaba que fuera posible.
Vamos a agendar , así no utilizamos imágenes.
Un abrazo.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR