Tutorial:Cbox flotante efecto de circulo 2 ♥


Hola a todas hoy les traigo otro tutorial de circle :3 es parecido al efecto del cbox que tengo n.n¡ agan clic en vista previa para ver como es:


Sigan los pasitos si lo deseean
Para Plantilla Basica o Blogger: Ir a Diseño/Añadir gadget/HTMLJavacript y pegas el siguiente codigo
Para Plantilla Clasica o Blogskin: Ir a su plantilla y pegar donde lo desee el  codigo
(para copiar el codigo ,selecciona todo el codigo y Presionas Ctrl+C y ya lo tienes copiado y lo pegas donde te indique )
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>

<a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" src="URL DE CBOX CLIC AQUI" width="200"  title="Click"/></a>

 <center>
<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
padding:150px;
background:url(#);
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">

<div style="text-align: center;">
<style>
/** Cicle GR **/
.grcicle-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 cursor: default;
 box-shadow:
  inset 0 0 0 16px rgba(255,255,255,0.6),
  0 1px 2px rgba(0,0,0,0.1);/*Tamaño de la transparencia del circulo blanco*/
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
}
.grcicle-img-1 {
  background-image: url(URL IMAGEN PRINCIPAL);
}
.grcicle-info {
 position: absolute;
background-image: url(Url de Fondo al pasar el cursor);
 width: inherit;
 height: inherit;
 border-radius: 50%;
 opacity: 0;
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -o-transform: scale(0);
 -ms-transform: scale(0);
 transform: scale(0);
 -webkit-backface-visibility: hidden;
}
.grcicle-info h3 {
color: #fff;/*Color de la letra*/
text-transform: uppercase;
letter-spacing: 2px;
font-size: 15px;
margin: 0 10px;
padding: 15px 0 0 0;
height: 10px;
font-family: 'Open Sans', Arial, sans-serif;
}
.grcicle-info p {
 color: #fff;/*Color de texto*/
 padding: 10px 5px;
 font-style: italic;/*Font del texto*/
 margin: 0 30px;
 font-size: 12px;/*Tamaño del texto*/
 opacity: 0;
 -webkit-transition: all 1s ease-in-out 0.4s;
 -moz-transition: all 1s ease-in-out 0.4s;
 -o-transition: all 1s ease-in-out 0.4s;
 -ms-transition: all 1s ease-in-out 0.4s;
 transition: all 1s ease-in-out 0.4s;
}
.grcicle-info p a {
 display: block;
color: #fff;/*Color del texto*/
 font-style: normal;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 9px;/*Tamaño del texto*/
 letter-spacing: 1px;
 padding-top: 4px;
 font-family: 'Open Sans', Arial, sans-serif;/*Font del texto*/
}
.grcicle-info p a:hover {
 color: #fff222;/*Color del texto al pasar el cursor*/
}
.grcicle-item:hover {
 box-shadow:
  inset 0 0 0 1px rgba(255,255,255,0.1),
  0 1px 2px rgba(0,0,0,0.1);
}
.grcicle-item:hover .grcicle-info {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
 opacity: 1;
}
.grcicle-item:hover .grcicle-info p {
 opacity: 1;
}
.grcicle-grid {
 margin: 20px 0 0 0;
 padding: 0;
 list-style: none;
 display: block;
 text-align: center;
 width: 100%;
}
.grcicle-grid:after,
.cicle-item:before {
 content: '';
    display: table;
}
.grcicle-grid:after {
 clear: both;
}
.grcicle-grid li {
 width: 320px;/*Ancho del circle*/
 height: 320px;/*Altura del circle*/
 display: inline-block;
 margin:20px;/*Separacion de los circle*/
}
</style><br />
<br />
<div class="grcicle-grid">
     <li>
      <div class="grcicle-item grcicle-img-1">
       <div class="grcicle-info">
       <center>
<div style="background: url(#); border-radius: 20px; margin-top: 20px; width: 190px;">
<br />
<br />
Aqui tu Codigo de Cbox<br />
<center><div id="author"><a href="javascript:void(0);" onclick="showHideAT()"><input style="color: #BFB6FF;background: #fff;border: 2px dashed #AFBBFC; cursor: nw-resize;" type="button" value="Cerrar" class="Cerrar" />
</a></div>
</center>
</div></center>
       </div>
      </div>
     </li></div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><div >
<span ></span></div></a></div></div></div></div></div></div></center>
</center>
</div>
<div class="grcicle-thumb grcicle-img">
</div>
</div>
</li>
</div>
</div>
</div></div></div></div></center>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><div >
<span ></span></div></a></div>
190:Ancho del campo del cbox tiene que estar masomenos que el mismo tamaño del cbox :
Ejemplo mi cbox en vista previa su ancho es 180 y en el ancho del campo es 190 hay una diferencia de 10 o puede ser igual
20:Aumentas el numero y se ira el cbox mas abajo,si disminuyes se ira el cbox para arriba 
BFB6FF:Color de letra del boton Cerrar
fff:Color de fondo del boton cerrar
2:Tamaño del borde del boton cerrar
dashed:Puedes cambiarlo a "solid" o "dotted" para mas CLIC AQUI para que veas los tipos de bordes
Y listo
AFBBFC:Color del borde del boton cerrar
Listo eso es todo n.n¡ Antes estaba desactivado tambien para copiar codigos ,no lo sabia,pero ya esta areglado :3
Codigo:tympanus

9 comentarios :

  1. Muchas gracias por el tutorial, lo utilizaré en
    alguno de mis próximos diseños seguramente :3
    Saludos :D

    ResponderEliminar
  2. muy chulo el tutorial, gracias ^^

    ResponderEliminar
  3. Onee-chan, ais te dejé abandonada varios meses>:c
    NOOOO TE RECUERDAS DE MÍ, BUENO, DA IGUAL x'D.
    Decirte que aunque no suelo comentar [demasiada flojera, créeme, nunca he sido de las personas muy activas] en tu bloggi últimamente me estoy pasando mucho por aquí:3
    Y, ¡eh! que no te he olvidado ¬u¬
    Te reparto lof, Luna~♥

    ResponderEliminar
    Respuestas
    1. ow no yo losiento mucho por no pasarme por tu blog ,pero creo que estabas ausente en tu blog :3
      Tampoco te he olvidado *-*

      Eliminar
  4. Lo del feed debe ser un problema de mi blog, tengo que verlo haha, Muy lindo tuto, gracias por subirlo! :)

    ResponderEliminar
  5. Me encanta jeje yo ya tengo el otro efecto y me encanta amiga aunque este igual se ve super kawaii, muchas gracias por compartirlo n_n

    ResponderEliminar
  6. Tengo plantilla blogskin, no me sirvió u.u

    ResponderEliminar

Hola :3 Bienvenidos a Lunany-kawaii
Debera seguir las siguientes reglas:
-No insultos
-No spam
-Ni peleas
gracias ♥