Puzzle de redes sociales

Los íconos sociales estilo puzzle de daddydesign son originales y pueden ser descargados gratuitamente pero, como son PNGs transparente, pueden servir para armar algo más divertido tal como usa ese sitio en su sidebar; simplemente, colocando cada uno de ellos de tal forma que se superpongan y de ese modo, crear un puzzle completo o parcial.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Es sencillo de armar, basta crear una lista de enlaces con las imágenes y eventualmente, como en este ejemplo, en lugar de colocar un ícono, colocamos una imagen transparente para crear un "agujero":

<div id="puzzleredes">
  <ul>
    <li>
      <a href="URL_SERVICIO">
        <img src="URL_IMAGEN.png">
      </a>
    </li>
    <!-- y seguimos agregando todas las que se nos ocurra -->
</ul>
</div>

Ahora, falta el CSS que simplemente se basa en hacer que cada item de la lista flote y dimensionarlas de tal modo que los rectángulos sean más pequeños que las imágenes para que se superpongan.

Sólo basta un poco de aritmética y probar los distintos valores que, es este caso se refieren a los íconos de 128x128:

<style>
  #puzzleredes {
    height: 390px;
    margin: 0 auto;
    position: relative;
    width: 470px;
  }
  #puzzleredes a {
    display: block;
  }
  #puzzleredes ul {
    list-style-type:none;
    margin: 0;
  }
  #puzzleredes li {
    float:left;
    height:85px
    width:85px;
  }
</style>