Conjunto de íconos usando sólo CSS

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

Usar JSON para leer Facebook (Parte 2)

En un artículo anterior se mostraba como leer los feeds de un Perfil o Page de Facebook siempre que estos fueran públicos; allí se filtraban algunos tipos de publicaciones y luego se procedía a crear una página con el contenido. Ese mismo método nos permite mostrar cualquier cosa o un solo tipo de publicación.

Por ejemplo, supongamos que sólo quisiéramos mostrar las imágenes, podríamos crear un script que leyera la última publicada para mostrarla en la sidebar como si fuera un gadget.

Agrego mi función antes de </head>:

<script type="text/javascript">
//<![CDATA[

function leerpicsfacebook(json) {

  // aquí voy a iniciar algunas variables
  var data, tipo, link, source, picture, from, extra;
  var salida = "";
  var extra = "";

  // como en todos los otros ejemplos, se ejecuta un bucle que lee una cierta cantidad de entradas
  for (var i = 0; i < json.data.length; i++) {
    var post = "";

    // guardo los datos de cada entrada en un array llamado data
    data = json.data[i];
    // si no hay nada, termino porque significa que hay menos de las que solicité leer
    if (i==json.data.length) { break; }

    tipo = data.type; // es dato nos indica qué tipo de publicación es (busco que sea photo)

    // este dato, indica quién lo publicó
    from = data.from.name;
    // como sólo quiero ver las mias, si no lo son, las ignoraré
    if(from!="mi_nombre") {tipo="dummy";}

    // si es una Foto, voy a leer los datos
    if(tipo=="photo") {
      picture = data.picture; // esto contiene la dirección URL de la miniatura
      link = data.link; // esto contiene la dirección URL a la imagen real que puede estar en Facebook o bien ser un enlace externo
      // voy armando mi código HTML para mostrarla
      post += "<a target='_blank' title='" + message + "' href='" + link + "><img src='" + pic + "'/></a>";
      // si la foto está en Facebook sólo podrá verse si uno está logueado
      if(link.indexOf("www.facebook.com")>0) {
        // le agregaré un texto debajo para indicarlo
        extra = "<span>VIA FACEBOOK</span>"
      }
      // creo el código HTML de mi gadget
      salida += "<div class="fbpic">";
      salida += post + extra;
      salida += "</div>";
      // y termino porque sólo quiero mostrar una, la última publicada
      break;
    }
  }

  // terminado el bucle, escribiré los datos en un DIV al que le pondre un ID especifico
  document.getElementById("picfacebook").innerHTML = salida;
}
//]]>
</script>

Como en el caso anterior, en un elemento HTML de la sidebar pongo el DIV donde se mostrará la imagen, el estilo y la llamada a la función:

<style>
  .fbpic {
    background-color: #BBB;
    border: 2px solid #FFF;
    display: table-cell;
    height: 150px;
    text-align: center;
    vertical-align: middle;
    width: 150px;
  }
  .fbpic img {
    max-height: 120px;
    max-width: 130px;
  }
  .fbpic span {
    color:#000;
    display:block;
    font-size:11px;
    text-align:center;
  }
</style>

<div id='picfacebook'> C A R G A N D O </div>

<script src="http://graph.facebook.com/mi_nombre/feed?limit=20&amp;callback=leerpicsfacebook"></script>

donde mi_nombre es el nombre (o número) de nuestro Perfil o Page y limit es la cantidad de datos que leeremos ya que si bien vamos a mostrar una sola, debemos leer varios apra asegurarnos que haya alguna.

Lo mismo puedo hacer con los videos, por ejemplo, así, mostraría los últimos tres publicados:

<script type="text/javascript">
//<![CDATA[

function leervidsfacebook(json) {
  var data, tipo, link, source, picture, from;
  var salida = "";
  var contarsalidas = 0; 
  for (var i = 0; i < json.data.length; i++) {
    var post = "";
    data = json.data[i];
    if (i==json.data.length) { break; }
    tipo = data.type;
    from = data.from.name;
    if(from!="mi_nombre") {tipo="dummy";}
    if(tipo=="video" {
      source = data.source
      link = data.link
      picture = data.picture
      post += "<a target='_blank' href='" + source + "'><img src='" + picture + "'/></a>";
      salida += "<div class='fbvid'>";
      salida += post;
      salida += "</div>";
      contarsalidas ++;
      if(contarsalidas==3) { break; }
    }
  }
  document.getElementById("vidfacebook").innerHTML = salida;
}

//]]>
</script>

<style>
  .fbvid {
    margin: 5px 0;
  }
  .fbvid img {
    background-color: #FFF;
    height: 97px;
    padding: 2px;
    width: 130px;
  }
</style>
<div id='vidfacebook'> C A R G A N D O </div>
<script src="http://graph.facebook.com/mi_nombre/feed?limit=20&amp;callback=leervidsfacebook"></script>

Tanto en este caso como en los ejemplos previos, la cantidad de datos que pueden leerse son muchos y siempre se utiliza la misma sintaxis, se define una variable para guardarlos y luego, se agrega un punto con el nombre del dato; si a la variable la llamase leer, estos son algunos a los que puede accederse:

leer.id es el número indicativo de la publicación
leer.from.name es el nombre del Perfil o Page
leer.from.id es el ID del Perfil o Page
leer.icon es la imagen del ícono distintivo del tipo de publicación
leer.type indica el tipo de publicación
leer.created_time y leer.updated_time son las fechas de creación

leer.picture es la imagen miniatura
leer.source es la fuente (de un video o swf por ejemplo)
leer.name es el título del video o del enlace
leer.caption es el nombre del servicio que provee el video
leer.description es el texto secundario del video o del enlace
leer.application indica la aplicación que lo agrega (si es que hay una)
leer.properties.name, leer.properties.text y leer.properties.href son las referencias al sitio original de un enlace

leer.likes.count es la cantidad de MeGusta que posee esa publicación
leer.likes.data[i].name es la lista de usuarios que lo han marcado con Me Gusta

leer.comments.count es la cantidad de comentarios que tiene una publicación
leer.comments.data[i].from.name es el nombre de los comentaristas
leer.comments.data[i].message es el comentario en si mismo
leer.comments.data[i].created_time es la fecha del comentario

Además, hay dos datos extars que nos permitirían seguir leyendo más datos:

leer.paging.previous es el enlace que deberíamos utilizar para leer las 25 publicaciones anteriores (si es que hay) por ejemplo:
     http://graph.facebook.com/mi_nombre/feed?limit=25&since=2011-01-17T04%3A31%3A59%2B0000
leer.paging.next es el enlace que deberíamos utilizar para leer las 25 publicaciones siguentes (si es que hay) por ejemplo:
     http://graph.facebook.com/mi_nombre/feed?limit=25&until=2011-01-14T08%3A23%3A38%2B0000

Tres packs de íconos

Un gadget para FeedBurner

Usar JSON para leer Facebook (Parte 1)

También Facebook es accesible via JSON aunque, en este caso, la configuración de privacidad debe ser establecida para que sean públicas y si bien no podemos tener acceso a todo, los feeds pueden ser leidos del mismo modo que todos los vistos anteriormente, utilizando esta dirección:

http://graph.facebook.com/nombre_usuario/feed

Esto es válido tanto para un Perfil como para una Page y los datos devueltos en ambos casos son similares así que podemos proceder igual que para cualquier otra dirección, agregando los párámetros de limit para establecer la cantidad de datos a leer y callback para ejecutar una función que los interprete. Estos datos, son diversos y lo mejor para entenderlos, es con un ejemplo.

Voy a agregar una función antes de </head>:

<script type="text/javascript">
//<![CDATA[
function leerallfacebook(json) {

  // aquí voy a iniciar algunas variables
  var data, fecha, tipo, link, message, source, link, picture, likes, from;
  var salida = "";
  var contarsalidas = 0;
  
  // como en todos los otros ejemplos, se ejecuta un bucle que lee una cierta cantidad de entradas
  for (var i = 0; i < json.data.length; i++) {
    var post = "";

    // guardo los datos de cada entrada en un array llamado data
    data = json.data[i];
    // si no hay nada, termino porque significa que hay menos de las que solicité leer
    if (i==json.data.length) { break; }

    fecha = data.created_time; // esta es la fecha de publicación
    icon = data.icon; // este es el ícono que depende del tipo de publicación
    tipo = data.type; // este dato nos indica qué tipo de publicación es

    // esto nos dice la cantidad de "Me Gusta" que tiene
    likes = 0;
    if(data.likes) {likes = data.likes.count;}

    // este dato, indica quién lo publicó
    from = data.from.name;
    // como sólo quiero ver las mias, si no lo son, las ignoraré
    if(from!="mi_nombre") {tipo="dummy";}

    // y ahora, según el tipo de publicación, leo los datos
    switch(tipo) {

    case "photo": // es del tipo Foto
      picture = data.picture; // esto contiene la dirección URL de la miniatura
      link = data.link; // esto contiene la dirección URL a la imagen
      message = data.message; // esto contiene el texto que le hayamos agregado
      // voy armando mi código HTML para mostrarla
      post += "<a target='_blank' href='" + link + "'><img src='" + picture + "'/></a>";
      break;

    case "video": // es del tipo Video
      picture = data.picture; // esto contiene la dirección URL de la miniatura
      link = data.link; // esto contiene la dirección URL del video
                             // por ejemplo: http://www.youtube.com/watch?v=XXXXXXXXXXX
      source = data.source;  // esto contiene la dirección URL que usamos para insertarlo en una web
                                       // por ejemplo: http://www.youtube.com/v/XXXXXXXXXXX&autoplay=1
      // voy a usar una ventana modal para mostrar esos videos pero puede usarse cualquier otro método
      // dependiendo del servicio, uso diferentes tamaños
      if(source.indexOf("www.youtube.com")>0) {
        post += "<a class='lightwindow' params='lightwindow_width=640,lightwindow_height=390,lightwindow_loading_animation=true' title='' rel='' href='" + source + "'><img src='" + picture + "'/></a>";
      } else if(source.indexOf("vimeo.com")>0) {
        post += "<a class='lightwindow' params='lightwindow_width=560,lightwindow_height=312,lightwindow_loading_animation=true' title='' rel='' href='" + source + "'><img src='" + picture + "'/></a>";
      } else {
        // cualquier otro es mostrado como un enlace
        post += "<a href='" + link + "'><img src='" + picture + "'/></a>";
      }
      break

    case "link": // es del tipo Enlace
      picture = data.picture; // esto contiene la dirección URL de la miniatura
      link = data.link;  // esto contiene la dirección URL del enlace
      // voy armando mi código HTML para mostrarlo
      post += "<a target='_blank' href='" + link + "'><img src='" + picture + "'/></a>";
      break

    default: // cualquier otro no lo voy a mostrar en este ejemplo
      // hay varios; puede ser "swf", "music", "status", etc
      break
    }

    // ahora, verifico que la publicación sea una del tipo que quiero mostrar
    if(post!="") {
      // si es así, coloco los datos en un código HTML
      salida += "<div class='fbpost'>";
      salida += post;
      salida += "<img class='icon' src='" + icon + "' />";
      salida += "<span class='like'>" + likes + "</span>";
      salida += "</div>";
      // y voy contando hasta completar la cantidad que quiero mostrar
      contarsalidas ++;
      if(contarsalidas==24) { break; }
    }
  }

  // terminado el bucle, escribiré los datos en un DIV al que le pondre un ID especifico
  document.getElementById("resultados").innerHTML = salida;
}
//]]>
</script>

¿Que faltaría para que funcionara? Agregar un DIV en alguna parte, allí donde quisiéramos que se nuestre e inmediatamente después, llamar a la función:

<div id='resultados'> C A R G A N D O </div>

<script src="http://graph.facebook.com/mi_nombre/feed?limit=20&amp;callback=leerallfacebook"></script>

donde mi_nombre es el nombre (o número) de nuestro Perfil o Page y limit es la cantidad de datos que leeremos.

Si usamos CSS, podemos crear cualquier tipo de página:

<style>
  .fbpost {
    background-color: #444;
    border: 1px solid #666;
    display: block;
    float:left;
    height: 160px;
    margin: 2px;
    padding: 10px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 160px;
  }
  .like {
    background: transparent url(URL_imagenlike) no-repeat left 50%;
    bottom: 10px;
    color: #9FAECC;
    display: block;
    font-size: 18px;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 50px;
  }
  .icon {
    bottom: 10px;
    display: block;
    position: absolute;
    left: 10px;
  }
</style>

Un poco más sobre los bordes redondeados

La propiedad border-radius es la que nos permite "redondear" los bordes de casi cualquier un objeto:

-moz-border-radius: 10px; // en Firefox
-webkit-border-radius: 10px; // en Chorme y Safari
border-radius: 10px; // la propiedad según al w3.org

No es necesario que se redondeen los cuatro lados; funciona de manera similar a la propiedad border así que el orden es el mismo: arriba/izquierda arriba/derecha abajo/derecha y abajo izquierda así que podemos poner cuatro valores distintos:

-moz-border-radius: 10px 20px 30px 40px;
-webkit-border-radius: 10px 20px 30px 40px;
border-radius: 10px 20px 30px 40px;

si ponemos un solo valor: -moz-border-radius: 10px;
será lo mismo que escribir: -moz-border-radius: 10px 10px 10px 10px;

si ponemos dos valores:-moz-border-radius: 20px 5px;
será lo mismo que escribir: -moz-border-radius: 20px 5px 20px 5px;

si ponemos tres valores: -moz-border-radius: 20px 5px 20px;
será lo mismo que escribir: -moz-border-radius: 20px 5px 20px 5px;

Además, cada uno de ellos tiene una propiedad especial que también puede ser utilizada:

-moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomright -moz-border-radius-bottomleft
-webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-right-radius -webkit-border-bottom-left-radius
border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius

Ahora bien, cuando pensamos en esto, nos imaginamos "círculos", obviamente, la palabra radius nos indica eso, el valor que le ponemos es el valor del radio de un círculo; tanto es así que podemos crear un círculo casi perfecto.

Si tenemos un elemento que mide 100x100 y le ponemos a border-radius un valor de 50, el resultado será esto:

Pero eso no es todo, en realidad, border-radius es una propiedad que también permite crear elipses y para eso, separamos los valores con una barra inclinada; por ejemplo:

-moz-border-radius: 20px / 5px;
-webkit-border-radius: 20px / 5px;
border-radius: 20px / 5px;

En esos casos, el primer valor es el radio horizontal y el segundo, el radio vertical.

Acordeones simples con jQuery

En Applendamos mustran una forma de crear acordeones con jQuery. Lo interesante es que el método es muy simple y no tiene mayores restricciones por lo que es posible adaptarlos a cualquier tipo de diseño.

Obviamente, necesitamos jQuery que colocamos antes de </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>

Inmediatamente después, ponemos la función:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
  $("#accordion h3:first").addClass("active");
  $("#accordion div:not(:first)").hide();
  $("#accordion h3").click(function(){
    $(this).next("div").slideToggle("slow")
    .siblings("div:visible").slideUp("slow");
    $(this).toggleClass("active");
    $(this).siblings("h3").removeClass("active");
  });

/* IDEM PERO EL PRIMERO DESPLEGADO
  $("#acordeon h2:first").addClass("active");
  $("#acordeon div:not(:first)").hide();
  $("#acordeon h2").click(function(){
    $(this).next("div").slideToggle("slow")
    .siblings("div:visible").slideUp("slow");
    $(this).toggleClass("active");
    $(this).siblings("h2").removeClass("active");
  });
*/

});
//]]>
</script>

Y el CSS que es lo personalizable:

<style>
  #accordion { /* el rectángulo contenedor */
    width:450px;
  }
  #accordion h3 { /* los enlaces que despliegan y contraen el contenido */
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 0 10px #444 inset;
    -webkit-box-shadow: 0 0 10px #444 inset;
    box-shadow: 0 0 10px #444 inset;
    background-color: #DCDFF4;
    color: #6D76AF;
    cursor: pointer;
    font-family: Tahoma;
    font-size: 17px;
    font-weight: normal;
    height: 1.7em;
    line-height: 1.7em;
    margin: 0 0 2px;
    padding: 0 20px;
    position: relative;
  }
  #accordion h3:hover { /* efecto hover sobre esos enlaces */
    -moz-box-shadow: 0 0 10px #000 inset;
    -webkit-box-shadow: 0 0 10px #000 inset;
    box-shadow: 0 0 10px #000 inset;
    background-color: #BBBFF4;
    color: #FFF;
  }
  #accordion h3 span { /* una imagen que permuta segñun el estado del contenido */
    background: transparent url(archivo) no-repeat right top;
    display: block;
    height: 16px;
    position: absolute;
    right: 20px;
    top: 7px;
    width: 16px;
  }
  #accordion h3.active span { /* desplegado */
    background-position: right bottom;
  }
  #accordion div { /* el contenido */
    background-color: #000;
    border: 1px dotted #666;
    color: #AAA;
    font-family: Georgia;
    font-size: 13px;
    line-height: 1.5;
    margin: 10px;
    padding: 10px;
  }
</style>

Eso es todo. Ahora, basta crear el HTML que ponemos allí donde querramos verlo:

<div id="accordion">
  <h3> el enlace del primer elemento <span></span></h3>
  <div> el contenido del primer elemento </div>
  <h3> el enlace del segundo elemento <span></span></h3>
  <div> el contenido del segundo elemento </div>
  <!-- y seguimos agregando elementos enlace + contenido -->
</div>

Lo que hace el script es crear un enlace en la etiqueta H3 que desplegará eso que está en un DIV colocado inmediatamente después.

En todo caso, si se quieren usar otras etiquetas, simplemente se cambian en el script y si al empezar, quisiéramos que todos se muestren contraidos, lo cambiaríamos de este modo:

$(document).ready(function(){
  $("#accordion div").hide();
  $("#accordion h3").click(function(){
    $(this).next("div").slideToggle("slow")
    .siblings("div:visible").slideUp("slow");
    $(this).toggleClass("active");
    $(this).siblings("h3").removeClass("active");
  });
});

Eventualmente, el contenido puede mostrarse todo desplegado y pasado un tiempo (cuando se carga la página) se cierra. Eso depende de la velocidad de carga así que lo mejor es ocultarlo y mostrarlo cuando ya está todo listo; para eso, cambiamos la regla de estilo del contenedor:

#accordion {
  visiblilty: hidden;
  width:450px;
}

Y luego, en el script, lo mostramos cuando se cargue por completo:

$(document).ready(function(){
  .......
  document.getElementById("accordion").style.visibility="visible";  
});

Suscribirse a la entradas

Vagabundia

Conjunto de íconos usando sólo CSS

Usar JSON para leer Facebook (Parte 2)

Tres packs de íconos

Un gadget para FeedBurner

Usar JSON para leer Facebook (Parte 1)

Un poco más sobre los bordes redondeados

Acordeones simples con jQuery

últimas entradas

la puerta abierta

las etiquetas

Páginas

Addictive Flavour
	Contiene 750 íconos de 48x48, en formato PNG. descargar

Reflection
	Contiene 208 íconos de 128x128, en formato PNG. descargar

SocialShift
	Contiene 246 íconos de 16x16, 32x32 y 48x48, en formato PNG. descargar