Olá + Efeito Crooble

(14) Tumblr
Hi. Tempos que não venho aqui né? Acho que vocês devem estar querendo me matar! Ok, ok, admito que mandei mal mesmo com esse sumiço. Pois bem, estoy aqui! Acho que vou trocar esse layout do blog, o que vocês acham, eu fico com ele por mais um tempo ou faço outro? 
Enfim, de ínicio não vou poder ficar criando novos efeitos e tutoriais para vocês então a maioria dos tutos serão reblogados. Mas não se preocupem, vou tentar trazer coisas diferentes e/ou pouco comuns para vocês.

No tutorial de hoje, vou ensinar o Efeito Crooble! Eu particularmente amei esse efeito, ele é mega fofo e lindinho. Vocês podem ver a preview dele clicando aqui. E os créditos vão ao Land Of Designs e o blog Chovendo Diamantes c;

Tutorial


Primeiramente, vá até o seu HTML e procure pela tag ]]></b:skin>
Depois de achá-la, acima dela você vai colar o seguinte código:
.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);
}
Uffa, que código enorme! Para facilitar, destaquei algumas coisas que quem já conhece um pouco de CSS já até sabe. Pois bem, o que está em negrito são as cores e o que está sublinhado são os tamanhos que vocês podem editar como bem entenderem.

Depois de editar o código salve e vá para o seu Layout.
Lá você adiciona um gadget HTML/JavaScript e cola o seguinte código:
<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>
O que está destacado em negrito são as url/endereço das imagens, que você pode editar como quiser assim como pode editar também onde está escrito "Título".
Depois disso é só salvar (:

Tentei explicar da melhor forma possível, espero que tenham gostado do tutorial ^^
Aliás, vocês querem que eu faça uns "styles" desse efeito? Com, obviamente, cores diferentes. Assim facilitaria a vida de vocês...
bjs ;*

Um comentário: