Efecto circle ♥ #1

|| ||

Holiwis, ya casi empieza liv y maddie ya me la quiero ver :D
Mi goshis hoy les traigo un efecto que muchas habrán visto en blogskin si? pues aquí esta este efecto y en 3 formas :D



Muy genialoso cierto :D pues vamos a colocarlo

Ve a plantilla Editar html busca /b:skin

Y antes de /b:skin colocamos

.ch-grid {
 margin: 20px 0 0 0;
 padding: 0;
 list-style: none;
 display: block;
 text-align: center;
 width: 100%;
}
.ch-grid:after,
.ch-item:before {
 content: '';
    display: table;
}
.ch-grid:after {
 clear: both;
}
.ch-grid li {
 width: 320px;
 height: 320px;
 display: inline-block;
 margin: 20px;
}
.ch-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);

 -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;
}
.ch-img{
 background-image: url(Url de la imagen);
background-position:50% 50%;
background-size:500px;
}
.ch-info {
 position: absolute;
 background: url(Url de la imagen 2) D9E8FC;background-position:50% 50%;
 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;
}

.ch-item:hover {
 box-shadow:
  inset 0 0 0 1px rgba(255,255,255,0.1),
  0 1px 2px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
 opacity: 1;
}
.ch-item:hover .ch-info p {
 opacity: 1;
}
Listo entonces para colocarlos iremos a una entrada o html javascript y colocaremos el siguiente código

Cbox versión

<ul class="ch-grid">
<li> <div class="ch-item ch-img">
<div class="ch-info">
<center>
<div style="margin-top:80px; width:270px;background:url(Url del fondo); border-radius:10px;">
<br/>
CÓDIGO DEL CBOX
</div>
</center>
</div>
</div>
</li>
</ul>
Ahora el ancho y el alto lo tendrán que modificar desde el mismo código
Alto: 54 px {O números que sumando de 100 px}
Ancho: 240 px

Scrollbox versión

<ul class="ch-grid">
<li><div class="ch-item ch-img">
<div class="ch-info">
<center>
<div style="margin-top:80px; width:270px;background:url(Url de la imagen); border-radius:10px;height:170px;overflow-x:hidden;overflow-y:scroll;text-align:left;">
Texto
<br/>
</div>
</center>
</div>
</div>
</li>
</ul>

Normal versión

<ul class="ch-grid">
<li><div class="ch-item ch-img">
<div class="ch-info">
<center>
<div style="margin-top:80px; width:270px;background:url(Url de la imagen); border-radius:10px;text-align:left;padding:5px;">
Texto
<br/></div>
</center>
</div>
</div>
</li>
</ul>
Y eso es todo :D

Los créditos se darán cuando todos los efectos hasta el #4 estén publicados C:

¡Beshotes! :D :*

7 comentarios:

  1. Wow había la versión del chat *O* Están muy lindos >w<~
    Besotes *3*~

    ResponderEliminar
  2. Muy hermoso el efecto :D gracias por compartir <3

    ResponderEliminar
  3. está precioso el tuto, me encantó , tu nuevo diseño está relindo , saluditos

    ResponderEliminar
  4. me encanta este efecto!! *¬* claramente lo usare :D
    saluditos! ^^

    ResponderEliminar
  5. Me encantaaaaaaaa *-* Lo usaré en mi próximo diseño :3

    ResponderEliminar

Tu comentario me haría muy feliz!! :D