13.11.12

Efeito Crooble


UP: Muito obrigada pelos 200 seguidores seus liamdos!! Muito feliz aqui, amo cada um de vocês!


Boa tarde gente!

À pedido, trouxe para vocês o efeito do meu gadget "Autoras", que está no cabeçalho. O tutorial original é do Land Of Design, mas eu também editei ele todo e o transferi para o blogger, então se forem usar nos credite também. Caso queiram vez o efeito original, cliquem aqui.

O código do efeito é grade, mas a maioria é tudo o blá blá blá pra fazer o efeito funcionar, o que deve-se modificar é pouca coisa.





Vá em Editar HTML e procure por ]]></b:skin>. Acima dessa tag, coloque:

.imgholder{
position:relative;
width: 50px;/* largura */
height:50px;/* altura */
float:left;
margin:60px 20px;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
}
/* thumbnails style */
.imgholder figure{
position:absolute;
left:0;
top:0;
width:50px;/* largura */
height:50px;/* altura */
margin:0;
overflow:hidden;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
}
.imgholder img{
position:absolute;
left:0;
top:0px;
width:50px;/* largura */
height:50px;/* altura */
z-index:5;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
opacity:0;
filter: alpha(opacity = 0);
transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
transition:
opacity 1s ease-in,
transform 1.5s;
-moz-transition:
opacity 1s ease-in,
-moz-transform 1.5s;
-webkit-transition:
opacity 1s ease-in,
-webkit-transform 1.5s;
}
.imgholder:hover img{
opacity:1;
filter: alpha(opacity = 100);
transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
}
.imgholder figcaption{
position:absolute;
left: -15px;
top:30%;
width:80px;
opacity:1;
filter: alpha(opacity = 100);
color:#fff;/* cor da letra */
font: normal 11px 'Yanone Kaffeesatz'; 
text-align: center;/* tamanho e nome da fonte */
text-trasnform: uppercase;
text-shadow:#767676 1px 1px 5px;/* sombra da letra */
z-index: 10;
transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
transition:
opacity 1s,
transform 1s ease;
-moz-transition:
opacity 1s,
-moz-transform 1s ease;
-webkit-transition:
opacity 1s,
-webkit-transform 1s ease;
}
.imgholder:hover figcaption{
opacity:0;
filter: alpha(opacity = 0);
transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
font: normal 10px 'Yanone Kaffeesatz'; /* tamanho e nome da fonte quando passa o mouse */
text-trasnform: uppercase;
color: #fff;/* cor da letra quando passa o mouse */
left: 5px;
top:15%;
width:130px;
}
/* decoration style */
.imgholder .circle{
position:absolute;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
}
.imgholder .outer1{
top:-5px;
left:-5px;
width:50px;/* largura */
height:50px;/* altura */
z-index:2;
border:6px solid;/* tamanho da primeira borda */
border-color:#71D4D9;/* cor da primeira borda */ 
box-shadow:0 0 3px #4CC5CE;/* sombra da primeira borda */
-moz-box-shadow:0 0 3px #4CC5CE;/* sombra da primeira borda */
-webkit-box-shadow:0 0 3px #4CC5CE;/* sombra da primeira borda */
background: #E2F1F2;/* cor da bolinha do meio */
background: -moz-radial-gradient(center, ellipse cover, #79D1D7 0%, #79D1D7 100%);/* sombra interna da bolinha */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#79D1D7), color-stop(100%,#79D1D7));/* sombra interna da bolinha */
background: -webkit-radial-gradient(center, ellipse cover, #E2F1F2 0%,#79D1D7 100%);/* sombra interna da bolinha */
background: -o-radial-gradient(center, ellipse cover, #E2F1F2 0%,#79D1D7 100%);
background: -ms-radial-gradient(center, ellipse cover, #E2F1F2 0%,#79D1D7 100%);/* sombra interna da bolinha */
background: radial-gradient(center, ellipse cover, #E2F1F2 0%,#79D1D7 100%);/* sombra interna da bolinha */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E2F1F2', endColorstr='#79D1D7',GradientType=1 );
transition:
box-shadow 1s ease-out,
border-color 1.5s;
-moz-transition:
-moz-box-shadow 1s ease-out,
border-color 1.5s;
-webkit-transition:
-webkit-box-shadow 1s ease-out,
border-color 1.5s;
}
.imgholder:hover .outer1{
border-color:#89DFE4;/* cor da primeira borda quando passa o mouse*/
box-shadow:0 0 10px #4CC5CE;/* sombra da primeira borda quando passa o mouse*/
-moz-box-shadow:0 0 10px #4CC5CE;/* sombra da primeira borda quando passa o mouse*/
-webkit-box-shadow:0 0 10px #4CC5CE;/* sombra da primeira borda quando passa o mouse*/
}
.imgholder .outer2{
top:-12px;
left:-12px;
width:64px;
height:64px;
z-index:1;
border:6px solid;/* tamanho da segunda borda */
border-color: #67D5DD;/* cor da segunda borda */ 
box-shadow:0 0 20px #4CC5CE;/* sombra da segunda borda */
-moz-box-shadow:0 0 20px #4CC5CE;/* sombra da segunda borda */
-webkit-box-shadow:0 0 20px #4CC5CE;/* sombra da segunda borda */
opacity:0;
filter: alpha(opacity = 0);
transform: scale(1.3,1.3);
-ms-transform: scale(1.3,1.3);
-moz-transform: scale(1.3,1.3);
-webkit-transform: scale(1.3,1.3);
transition:
opacity 1s ease 0.3s,
transform 1s ease-out 0.3s;
-moz-transition:
opacity 1s ease 0.3s,
-moz-transform 1s ease-out 0.3s;
-webkit-transition:
opacity 1s ease 0.3s,
-webkit-transform 1s ease-out 0.3s;
}
.imgholder:hover .outer2{
opacity:1;
filter: alpha(opacity = 100);
transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
}


Bom, sei que é bastante grande, mas o efeito fica lindo né gente? O que eu destaquei de vermelho são as cores. A parte que mais dá trabalho é a da sombra interna da bolinha.Os #79D1D7 se referem ao azul escuro dessa sombra da bolinha, e os #E2F1F2 se referem ao azul claro ( do meio) da sombra da bolinha. 

O que eu deixem em negrito, é o tamanho. Se você quiser deixar maior ou menor o tamanho , aumente ou diminua todos os "width:50px; height:50px;" o "width:64px;height:64px;" e o "width:80px;". Por exemplo, se você aumentou os width:50px; height:50px; de 50 para 60, ou seja, aumentou 10 px, aumente esse valor nos outros também ( o "width:64px;height:64px;" e o "width:80px;")

O resto está explicado entre /*  e */ 

Depois, adicione um gadget de HTML/javascript e cole:

<div class="imgholder"><div class="outer1 circle"></div>   <div class="outer2 circle"></div><figure>      <img src="http://24.media.tumblr.com/tumblr_m837c8VA0T1r6uvzso3_250.png" /><figcaption class="caption">Título</figcaption></figure></div>
<div class="imgholder"><div class="outer1 circle"></div><div class="outer2 circle"></div><figure>      <img src="http://25.media.tumblr.com/tumblr_m837c8VA0T1r6uvzso5_250.png" /><figcaption class="caption">Título</figcaption></figure></div>
<div class="imgholder"><div class="outer1 circle"></div><div class="outer2 circle"></div><figure>      <img src="http://25.media.tumblr.com/tumblr_m837c8VA0T1r6uvzso2_250.png" /><figcaption class="caption">  Título</figcaption></figure></div>

Altere o que está em negrito e salve. Pronto!


9 comentários:

  1. Estava mesmo procurando esse tutorial , muito extenso né ? ADOREI seu blog se quiser


    http://praia234.blogspot.com.br beijão Garota Imaginária

    ResponderExcluir
  2. O efeito é lindo! Ah, queria me afiliar ^^

    omeubrilhantemundo.tk

    ResponderExcluir
  3. Ah, que legal! Fica muito lindo!
    Ameeei!
    Parabéns pelos seguidores, você merece!

    Visita? Batom De Framboesa

    ResponderExcluir
  4. O código é meio grandinho, mas o efeito é lindo!!!
    Adorei o blog, flor! Primeira vez aqui e eu amei!!
    Aceita afiliação? Aguardo respostas!! Beeijos!
    pqngarota.tk

    ResponderExcluir
  5. Esse efeito e tipo perfeito,maravilhoso ... E muito lindo. Quem sabe um dia, quando tiver uma postadora junto comigo la no DL, eu use ^^

    Xoxo, Melissa :*
    doucelamour-oficial.blogspot.com.br

    ResponderExcluir
  6. ótimo tuto :D
    Flor, não tenho palavras para dizer o quanto adorei esse layout!! é perfeito!!
    Beijos

    Morango aos Pedaços
    Space Girls

    ResponderExcluir
  7. Amei esse efeito! Ele é lindo, perfeito para a equipe ^^

    Beijinhos Açucarados~~> the-world-icons.blogspot.com

    ResponderExcluir
  8. O código é enorme, mas vale a pena! Super lindo!

    ResponderExcluir
  9. Eu tentei transfeir o codigo, 3 milhoes de anos e não consegui, ainda bem que achei aqui! rsrs

    HistoriaAgridoce.blogspot | Acesse baby!

    ResponderExcluir