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!
Estava mesmo procurando esse tutorial , muito extenso né ? ADOREI seu blog se quiser
ResponderExcluirhttp://praia234.blogspot.com.br beijão Garota Imaginária
O efeito é lindo! Ah, queria me afiliar ^^
ResponderExcluiromeubrilhantemundo.tk
Ah, que legal! Fica muito lindo!
ResponderExcluirAmeeei!
Parabéns pelos seguidores, você merece!
Visita? Batom De Framboesa
O código é meio grandinho, mas o efeito é lindo!!!
ResponderExcluirAdorei o blog, flor! Primeira vez aqui e eu amei!!
Aceita afiliação? Aguardo respostas!! Beeijos!
pqngarota.tk
Esse efeito e tipo perfeito,maravilhoso ... E muito lindo. Quem sabe um dia, quando tiver uma postadora junto comigo la no DL, eu use ^^
ResponderExcluirXoxo, Melissa :*
doucelamour-oficial.blogspot.com.br
ótimo tuto :D
ResponderExcluirFlor, não tenho palavras para dizer o quanto adorei esse layout!! é perfeito!!
Beijos
Morango aos Pedaços
Space Girls
Amei esse efeito! Ele é lindo, perfeito para a equipe ^^
ResponderExcluirBeijinhos Açucarados~~> the-world-icons.blogspot.com
O código é enorme, mas vale a pena! Super lindo!
ResponderExcluirEu tentei transfeir o codigo, 3 milhoes de anos e não consegui, ainda bem que achei aqui! rsrs
ResponderExcluirHistoriaAgridoce.blogspot | Acesse baby!