JMiur [E]

Circle Navigation Effect with CSS3 es una idea que muestran en tympanus.net, aplicado a un slider de imágenes pero, para no complicar mucho las cosas, vamos a ver como generar ese mismo efecto en enlaces comunes y corrientes. Si se entiende la idea, luego pude ser trasladada a otras aplicaciones.

El truco se basa en anidar etiquetas dentro del enlace y de esa manera, poder controlarlas de manera individual:
<a class="circulo" href="javascpit:void(0);">
  <span style="background-image: url(IMAGEN_VISIBLE);"></span>
  <div style="background-image:url(URL_IMAGEN_OCULTA);"></div>
</a>
Los enlaces se muestran como pequeños círculos y, al colocar el cursor encima, se agrandan y muestran una segunda imagen:


Y claro, todo depende del CSS:
<style>
  /* los enlaces pueden tener cualquier dimensión */
  a.circulo {
    display: inline-block;
    height: 46px;
    position: relative;
    width: 75px;
  }
  /* la etiqueta SPAN contiene la imagen visible */
  a.circulo span {
    background: #00BE98 url() no-repeat 50% 50%; /* la imagen es un fondo */
    display: block;
    cursor: pointer;
    /* la dimensión de la imagen */
    height: 46px;
    width: 46px;
    border-radius: 23px; /* se ve como círculo con un radio que es la mitad de su tamaño */
    /* la posicionamos de manera absoluta en el centro */
    position: absolute;
    top: 50%;
    left: 50%;
    /* le ponemos márgenes negativos arriba y a la izquierda para centrarla */
    margin: -23px 0 0 -23px;
    /* la animación */
    -moz-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  /* la imagen oculta */
  a.circulo div {
    background: transparent url() no-repeat center center;
    height: 0;
    left: 50%;
    margin: 0;
    overflow: hidden;
    position: absolute;
    top: 50%;
    width: 0;
     z-index: 100;
    -moz-transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
  }
  /* al poner el cursor encima del enlace */
  /* la etiqueta SPAN se "agranda" */
  a.circulo:hover span {
    border-radius: 75px;
    height: 150px;
    margin: -75px 0 0 -75px;
    opacity: 0.6;
    width: 150px;
  }
  /* la etiqueta DIV se hace visible */
  a.circulo:hover div {
    border-radius: 75px;
    height: 150px;
    margin: -75px 0 0 -75px;
    width: 150px;
  }
</style>

21 comentarios:

Ray  

Curioso, pinta muy bien :) Gracias por el aporte.

Responder
Unknown  

Hay muchas plantillas que ya tienen esa funcion solo para insertarla y obtener los resultados, pero muchas gracias por la info, pues a mi me gusta tener retos y agregar cualquier codigo que me enseñen.

Responder
Fernando_Miranda  

Andale!!! Vaya que si este no es un buen truco. Ando tuneando mi blog, me tendras por aca muy segudio. Muchas gracias.

Responder
JMiur  

Sí, es curioso, Ray

Saludos, DulceMaria

Fherguzon Fletcher
Con paciencia, sólo requiere paciencia :D

Responder
Ray  

Yo creo que para un elemento en la sidebar para seguirnos en las redes sociales Debe quedar muy chulo!

Responder
Unknown  

Un encanto Jmiur, aún mi imaginación no está encendida, seguramente volveré meses adelante a preguntarte sobre ésto, delay, delay :D

Responder
JMiur  

No hay apuro :D

Responder
kwon sang woo  

disuclpa ante todo felicitarte por tu blog una consulta ( en que parte del codigo pongo mi enlace mi url para que direccione a otra pagina ???

Responder
kwon sang woo  

ya me salio con el enlace pero cuando puse varios no me salio como en el ejemplo :( si alguien em ayuda :(

JMiur  

¿Dónde está tu ejemplo?

Responder
kwon sang woo  

lo tenia en mi blog queria crear una lista como su ejemplo , pero cuando ponia la otra se veia que se ponia en mi cabesera de mi blog , y uno encima de otro :S

JMiur  

Sin ver tu ejemplo es imposible saber dónde está el error. Probablemente, si se veía arriba es que hay alguna propiedad position absolute errónea.

Responder
kwon sang woo  

lo hare en este momento en mi otro blog repetire el tutorial :)

Responder
kwon sang woo  

bien lo hice en mi otro blog y igualito se dirije mi cabesera :(aqui esta la url d emi blog http://gatitacosmekws.blogspot.com/
dejare el ejemplo ahi

JMiur  

El error es que has colocado las reglas de estilo dentro de <b:skin> </b:skin> incluyendo las etiquetas <style> y </style>; eso no debe hacerse, debes quitarlas porque de ese modo, no se ejecutan o lo hacen de manera errónea..

Responder
kwon sang woo  

OK ENTONCES EN DONDE UBICO EL CSS TODO LO AGREGE ANTES DE b:skin

Responder
kwon sang woo  

lo acabo de agregar antes de head y ya esta funcionando :D eta bien que lo haiga ubicado ahi o tb esta mal ?

JMiur  

Esta bien, no hay problema alguno :D

También pudo haber quedado donde estaba y simplemente eliminabas las etiquetas <style> y </style> que eran lo único equivocado.

Responder
kwon sang woo  

igual le agradesco siempre sigo su blog y pongo en practica cada ejemplo en blog donde coloque es este
http://pdulceamor.blogspot.com/ saludos por cierto le agregue a mi gmail espero verlo por ahi ;)

Responder
Unknown  

Como puedo hacer para que el circulo quede fijo? al cambiar el tamaño de la ventana del navegador se mueve de posicion :/

JMiur  

Dependerá del contexto donde este colocado. Si la posición de a a.circulo{} es relativa; no se mueve.

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