Tutorial : Circle Grid //Tipo 1 ♥ Part4

Hola  por fin les traigo la ultima parte de Circle Grid Tipo 1  todabia es el tipo 1,hay varios tipos  les gustara solo esperen a que haga el tutorial  Se que es mucho codigo pero queda lindo

VISTA PREVIA

TUTORIAL EFECTO GR CIRCLE GRID

Para Plantilla Basica o Blogger: Ir a Plnatilla/Editar HTML / Presionas CTRL+F y colocas en la cajita que te aparecio ]]></b:skin> al encontrar colocas el siguiente codigo antes de ]]></b:skin>

Para Plantilla Clasica o Blogskin:Pegar el siguiente codigo antes de </style>
(para copiar el codigo ,selecciona todo el codigo y Presionas Ctrl+C y ya lo tienes copiado y lo pegas donde te indique )

/** 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 DE LA IMAGEN PRINCIPAL 1);
}
.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: 300px;/*Ancho del circle*/
 height: 300px;/*Altura del circle*/
 display: inline-block;
 margin:5px;/*Separacion de los circle*/
}

Personaliza:

Para personalizar el fondo al pasar el cursor es este codigo

 background:rgba(211, 204, 247, 0.8);/*Color de fondo al pasar el cursor*/

El codigo 211, 204, 247, 0.8 algunos no saben que es , y les digo que es un color con opacidad medio transparente ,les esplico :

Van a http://html-color-codes.info/codigos-de-colores-hexadecimales/

Alli escogen cualquier color que gusten

Yo escojo el rosado y para cambiar 

211, 204, 247, 0.8 por el color rosado pero con opacidad ago lo siguiente 

vamos donde dice R G B que lo puse en cuadro rojo lo remplazo en 211 por 255 y 204 por 196 y 247 por 196

0.8 :Opacidad

y queda asi :

background:rgba(255,196,196, 0.8);/*Color de fondo al pasar el cursor*/

Y lo guardan y veran que ahora el fondo sera el color que eligieron pero con opacidad 

Si es mucho problema entonces hagan lo siguiente : 

El codigo rgba(211, 204, 247, 0.8) de 

 background:rgba(211, 204, 247, 0.8);/*Color de fondo al pasar el cursor*/

lo cambian por 

 background:#FFC4C4;/*Color de fondo al pasar el cursor*/

y lo cambian por el color que deseen .

Si quieren que sea con una imagen el fondo lo cambian ese codigo asi:

 background-image: url(Url del fondo);

Bueno y por ultimo pueden borrar este codigo si es que no le gusta la sobra del Texto 

text-shadow:  0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); /*Color de sombra en el texto*/

Personaliza el Tamaño Del circle

Si quieren que sea mas grande el circulo solo aumente los numeros y si lo quieren mas pequeños disminuye los numeros:

width: 220px;/*Ancho del circle*/
 height: 220px;/*Altura del circle*/

Listo ahora sigamos con lo ultimo :

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
Escoja que efecto quieres y copias su codigo:

Efecto Cbox

    <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 codigo de tu 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>

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

EFECTO CAJA DE TEXTO

  <div class="grcicle-grid">
<li>
      <div class="grcicle-item grcicle-img-1">
       <div class="grcicle-info"><br>
       <h3>Titulo</h3>
       <center><div style="margin-top: 25px;width: 200px;background: #FFF; border-radius:10px;text-align:center;padding:15px;opacity:0.8;height: 150px; overflow-x: hidden; overflow-y: scroll;" scrolling="auto">
Aqui su texto Texto Aqui su texto Texto Aqui su texto Texto Aqui su texto Texto Aqui su texto Texto Aqui su texto Texto Aqui su texto Texto Aqui su texto Texto Aqui su texto Texto Aqui su texto Texto Aqui su texto TextoAqui su texto Texto Aqui su texto Texto Aqui su texto Texto Aqui su texto Texto  </div></center>
       </div>
      </div>
     </li></div>

25:Aumentas el numero se ira la caja de texto mas abajo,si disminuyes se ira un poco mas arriba 

200:Ancho de la caja de texto

FFF:Color de fondo de la caja de texto

10:Bordes redondeados en la caja de texto

150:Altura de la caja de texto

Si no quieres el titulo solo elimina :

<h3>Titulo</h3> 

OTROS EFECTOS

  <div class="grcicle-grid">
<li>
      <div class="grcicle-item grcicle-img-1">
       <div class="grcicle-info"><br>
       <h3>Titulo</h3>
       <center>Aqui tu codigo de menu ,efectos,etc </center>
       </div>
      </div>
     </li></div>

Si no quieres el titulo solo elimina :

<h3>Titulo</h3> 

PARA PONER CIRCLE EN LA CABECERA

Bueno como saben si quieren ponerlo en la cabecera este efecto vayan a este tutorial :
http://www.lunany-kawaii.com/2013/04/tutorialponer-gadgets-en-la-cabecera.html
y donde dice Aqui tu codigo de tu gadget lo remplazan por el codigo que les dije que lo pusieran en un gadget HTMLJavacript
Codigo:tympanus
Bueno seguire haciendo el otro tipo de circle  y tambien otras cositas  ,estoy aprovechando cada minuto para poder publicar tutoriales ,antes que empiezen mis clases