JMiur [E]

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>

9 comentarios:

Gizele Veiga  

Adorei a idéia!
Muito criativa :)

[ ]s

Responder
Gem@  

Lo primero que hice fue intentar mover las piezas con el ratón jajajajaja

Responder
JMiur  

Gracias por el comentaro, Gizαα

Me pasó lo mismo en el original, Gem@ :D

Responder
Unknown  

JMiur:
quisiera saber si se puede cuando escribes una palabra que directamente se agregue el enlace. ejmplo: "fuiste alguna ves a brasil" y sin que yo pegue ningun enlace en brasil cuando lo publique aparecera un enlace ejmplo la pagina de google con imagenes de brasil. algo parecido con los emoticones que escribis la carita y cuando envias el comentario aparece la carita pero en ves de eso un enlace

Responder
JMiur  

Si, es el mísmo método pero deberías cerar un script que busque cada una de esas palabras y las reemplace por un enlace determinado. Sin son sólo agunas pocas palabras (y enlaces) puede hacerse pero si son muchas, es demasiado engorroso y poco práctico.

Responder
Grupo Cristal  

Hola Jmiur ya modifique una parte ahora solo me falta; eliminar el nombre que aparece en la parte superior(GRUPO CRISTAL) y ajustar la imagen en sus lados.

Saludos

Responder
JMiur  

Para eliminar ese texto, elimina el elemento header.

La imagen es el fondo de una tabla asi que si quieres verla complata, debes dimensioanr al tabla con el tamaño de la imagen:

<table class="cristalfm" height="632" width="762">

Responder
Anónimo  

http://seduccionelite.blogspot.com/2012/01/desnudo-direccional-de-pol-casanova.html mira esta entrada la hice yo.

Lo que quiero saber es si se pueden poner los videos de youtube un poco mas grande

Responder
JMiur  

Cambiando los valores de width y height de las etiquetas OBJECT y EMBED

Responder

¿Quiere dejar un comentario?

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

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