Efecto circle #2

|| ||

veo que me han dejado muchos mensajes en el cbox, sorry es que casi no los reviso no se me da pereza ¬¬



¿Recuerdan el tuto del efecto circle?

Pues aquí esta la 2da versión!! WIII

VISTA PREVIA AQUÍ

¿Genialoso no? esta bien vamos a ponerlo :D

Vamos a plantilla editar html y busca /b:skin
Antes de /b:skin pegamos el siguiente código

.ch-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 cursor: default;
 box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ch-thumb {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 overflow: hidden;
 position: absolute;
 box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
 -webkit-transform-origin: 95% 40%;
 -moz-transform-origin: 95% 40%;
 -o-transform-origin: 95% 40%;
 -ms-transform-origin: 95% 40%;
 transform-origin: 95% 40%;
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}
.ch-thumb:after {
 content: '';
 width: 8px;
 height: 8px;
 position: absolute;
 border-radius: 50%;
 top: 40%;
 left: 95%;
 margin: -4px 0 0 -4px;
 background: rgb(14,14,14);
 background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
 background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
 background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
 background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
 background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
 box-shadow: 0 0 1px rgba(255,255,255,0.9);
}

.ch-info {
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 overflow: hidden;
 background: #c9512e url(http://pastelpatterns.com/small/smallpattern-11.png);
 box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}
.ch-info h3 {
 color: #fff;
 text-transform: uppercase;
 position: relative;
 letter-spacing: 2px;
 font-size: 18px;
 margin: 0 60px;
 padding: 22px 0 0 0;
 height: 85px;
 font-family: 'Open Sans', Arial, sans-serif;
 text-shadow: 
  0 0 1px #fff, 
  0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
 color: #fff;
 padding: 10px 5px;
 font-style: italic;
 margin: 0 30px;
 font-size: 12px;
 border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
 display: block;
 color: #333;
 width: 80px;
 height: 80px;
 background: rgba(255,255,255,0.3);
 border-radius: 50%;
 color: #fff;
 font-style: normal;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 9px;
 letter-spacing: 1px;
 padding-top: 24px;
 margin: 7px auto 0;
 font-family: 'Open Sans', Arial, sans-serif;
 opacity: 0;
 -webkit-transition: 
  -webkit-transform 0.3s ease-in-out 0.2s,
  opacity 0.3s ease-in-out 0.2s,
  background 0.2s linear 0s;
 -moz-transition: 
  -moz-transform 0.3s ease-in-out 0.2s,
  opacity 0.3s ease-in-out 0.2s,
  background 0.2s linear 0s;
 -o-transition: 
  -o-transform 0.3s ease-in-out 0.2s,
  opacity 0.3s ease-in-out 0.2s,
  background 0.2s linear 0s;
 -ms-transition: 
  -ms-transform 0.3s ease-in-out 0.2s,
  opacity 0.3s ease-in-out 0.2s,
  background 0.2s linear 0s;
 transition: 
  transform 0.3s ease-in-out 0.2s,
  opacity 0.3s ease-in-out 0.2s,
  background 0.2s linear 0s;
  
 -webkit-transform: translateX(60px) rotate(90deg);
 -moz-transform: translateX(60px) rotate(90deg);
 -o-transform: translateX(60px) rotate(90deg);
 -ms-transform: translateX(60px) rotate(90deg);
 transform: translateX(60px) rotate(90deg);
  
 -webkit-backface-visibility: hidden;
}
.ch-info p a:hover {
 background: rgba(255,255,255,0.5);
}
.ch-item:hover .ch-thumb {
 box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
 -webkit-transform: rotate(-110deg);
 -moz-transform: rotate(-110deg);
 -o-transform: rotate(-110deg);
 -ms-transform: rotate(-110deg);
 transform: rotate(-110deg);
}
.ch-item:hover .ch-info p a{
 opacity: 1;
 -webkit-transform: translateX(0px) rotate(0deg);
 -moz-transform: translateX(0px) rotate(0deg);
 -o-transform: translateX(0px) rotate(0deg);
 -ms-transform: translateX(0px) rotate(0deg);
 transform: translateX(0px) rotate(0deg);
}.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(IMAGEN 1);
background-position:50% 50%;
background-size:450px;
}
.ch-info {
 position: absolute;
 background: url(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-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;
}

Ahora vamos a una entrada o html javascript y pegamos...

cbox versión

<ul class="ch-grid">
<li><div class="ch-item">
<div class="ch-info">
<p>
<center>
<div style="margin-top:50px; width:270px;background:url(Url de la imagen); border-radius:10px;">
<br/>
Código del cbox
</div>
</center>
</p>
</div>
<div class="ch-thumb ch-img">
</div>
</div>
</li>
</ul>

Scroll versión

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

Versión normal

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



Eso es todo :D faltan 3 tutoriales más :3

espero que les guste.

{Sango ya te mande el email c: la invitación lo sé muy rápido pero... necesito ya!}

Besotes

2 comentarios:

  1. Muy buen tutorial ;) Gracias por compartirlo.
    Sobretodo me gusta el de la scroll.
    Saludos!

    ResponderEliminar
  2. *o* ohh que hermosos >w<¡ yo tambien los tengo ,en la pagina web donde saco para hacer tutoriales de blogger x3 pero también lo tiene wasenoby o.o¡ aunque la pagina tympanus lo tiene un poco diferente pero tiene mas efectos los de cicle :3 ,la verdad el codigo es original de tympanus n.n¡ wasenoby da tambien sus creditos a esa pagina

    ResponderEliminar

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