Menu
  • HOME
  • SOBRE
  • PORTFOLIO
  • MIDIA KIT
  • CATEGORIAS
    • TUTORIAIS HTML
    • LAYOUTS FREE
      • FREEBIES
      • DICAS
      • SITES
      • SÉRIES
      • PAPO NERD
    • FEMINICES
      • RESENHAS
      • CABELOS
      • MODA
      • LIVROS
      • RECEBIDOS
  • MIGOS
  • DESIGNS
  • CONTATO
  • CRÉDITOS
Beleza Nerd
Beleza Nerd - Gleicy Haner

Como colocar Efeito Fancy no gadget "Autora"

30 de maio de 2013


Oi oi galerinha ^^ Tudo bem com vocês ? Hoje vim mostrar um tutorial para aquelas pessoas que estão com pouco tempo livre para ficar na net , e que não conseguem ficar postando todos os dias no blog . E existem pessoas igual a mim ^^ , que tem tempo de sobra pois é uma "vagabunda" que não faz nada e só fica no computador ! >.< Mas se você não é uma dessas pessoas esse tuts é pra você !
Clique em Leia +


1 > Vá em Modelo > Editar HTML > Ctrl+F e procure por : ]></b:skin>
2 > Após achar cole o seguinte código acima dela :
.imgholder{
    position:relative;
    width:70px;
 height:80px;
 border-radius:100px;
 float:left;
 margin-top:5px;
    margin-left:25px;
    margin-bottom:15px;
}


.imgholder img{
 position:absolute;
 left:0;
 top:0;
 width:70px;
 height:70px;
 z-index:5;
 border-radius:100px;
 -moz-border-radius:100px;
 -webkit-border-radius:100px;
 opacity:0.3;
 filter: alpha(opacity = 30);
 box-shadow:0 0 5px #000;
 -moz-box-shadow:0 0 5px #000;
 -webkit-box-shadow:0 0 5px #000;
 transform: scale(0.7,0.7);
 -ms-transform: scale(0.7,0.7);
 -moz-transform: scale(0.7,0.7);
 -webkit-transform: scale(0.7,0.7);
 transition: 
  opacity 1s,
  transform 1s ease-in-out 0.3s;
 -moz-transition: 
  opacity 1s,
  -moz-transform 1s ease-in-out 0.3s;
 -webkit-transition: 
  opacity 1s,
  -webkit-transform 1s ease-in-out 0.3s;
}


.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:-5px;
 top:25%;
 width:80px;
 color:#262626;
 font-weight:bold;
 text-shadow:-1px -1px 0 #fff;
 z-index:4;
    font: normal 15px 'Yanone Kaffeesatz'; text-trasnform: uppercase;
 transition: 
  top 0.5s ease-out;
 -moz-transition: 
  top 0.5s ease-out;
 -webkit-transition: 
  top 0.5s ease-out;
}


.imgholder:hover figcaption{

 top:90%;
}


.imgholder .circle{
 position:absolute;
 border-radius:100px;
 -moz-border-radius:100px;
 -webkit-border-radius:100px;
}


.imgholder .outer1{
 top:-8px;
 left:-8px;
 width:70px;
 height:70px;
 z-index:2;
 border:8px solid;
 border-color:#2d2d2d;
 background: transparent;
 background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
 background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
 background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
 background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
 background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );
 transform:rotate(90deg);
 -ms-transform:rotate(90deg);
 -moz-transform:rotate(90deg); 
 -webkit-transform:rotate(90deg);
 
 transition: 
  transform 1.8s ease-in-out,
  box-shadow 1s ease-out,
  border-color 1.5s;
 -moz-transition: 
  -moz-transform 1.8s ease-in-out,
  -moz-box-shadow 1s ease-out,
  border-color 1.5s;
 -webkit-transition: 
  -webkit-transform 1.8s ease-in-out,
  -webkit-box-shadow 1s ease-out,
  border-color 1.5s;
}


.imgholder:hover .outer1{
 border-color:#2d2d2d #dcdcdc #2d2d2d #dcdcdc ;
 transform:rotate(-10deg);
 -ms-transform:rotate(-10deg);
 -moz-transform:rotate(-10deg); 
 -webkit-transform:rotate(-10deg);
}
3 > Agora crie uma gadget Html/Javascript e cole:
<div class="imgholder">
<div class="outer1 circle"></div>
<figure>
<img src="Url da Imagem" />
<figcaption class="caption">Nome do Autor (a)</figcaption>
</figure>
</div>
É isso ai gente , espero que tenham gostado ^^ , queria agradeçer pelos comentários no post passado , adorei responder todas vocês , muito obrigado por visitar meu blog > SKW <  E espero que vocês me perguntem mais >.< , Tem a minha ask se quiserem . Kissus 
Compartilhe nas redes sociais! Facebook Twitter Google+



. # Tutoriais








Compartilhe nas redes sociais!

Nenhum comentário:

Postar um comentário

Fã page | Twitter | Instagram

Críticas construtivas são sempre bem vindas.
Deixe o link do seu blog no final do comentário e retribuiremos a visita
Aceitamos TAG's, se não a respondermos, provavelmente nós já devemos ter respondido anteriormente por outra indicação.
Lembre-se, tudo aqui é feito para você, então fique a vontade para pesquisar,ler,comentar e pedir postagens.

Gleicy Haner, tenho 19 anos, sou apaixonada por maquiagem,filmes,livros e gatos. Sou blogueira 4 anos (pelo menos com esse blog haha) estou desenvolvendo um amor incondicional por fotografia. Também a louca dos signos, Taurina com ascendente em Capricórnio (sou legal, eu juro) prezo pela beleza,liberdade e boa vontade de fazermos e sermos exatamente o que queremos. Sou wiccana a alguns anos, e também uma universitária indecisa,mas amo ciências e a área de exatas. Bem vindo ao meu espaço favorito.


Fã page

Teens Forever - Blog

Categorias



Tags

Tutoriais recebidos BEDA resenha livros 4you Dicas moda Maquiagem Musicas blogs sem categoria Layout Free indicação Bloguerices paponerd parceria publipost resenhas Wishlist cabelos html Desabafos PROJETOS batom matte blogueiras games layouts Series Sorteios presskit freebies wishlist da china Bandas listas Solta o verbo amizade feminices inspiracao photoshop playlist semanadebeleza Customização batom ediçoes fotografia opiniões parcerias plus size recebidos da china youtubers beleza beleza nerd compras comprinhas da china demillus dicas para blogueiros english is fun fotos instagram loja chinesa roupas plus size na china sapatos Halloween ano novo batom bbb blogagem coletiva capas editaveis dominio hidratante ilustrações layout lingerie maquiagem gastando pouco maquiagem na china pinceis produtos gratis romwe sapatos na china sorteio acessorios baratos agua de amora ajude animais aplicativos apps batom liquido capa para youtube gratis como bombar no instagram dia das bruxas dicas de fotografia download ebay edicao de imagens edicao de video fotografia para blogs glitter lingerie atacado maquiagens salva vidas paris progressivas receitas reprovados sedução da seda unhas

Parceiros

Quer se tornar parceiro? entre em contato aqui.

+ vistos da semana

  • Formatando e otimizando seus posts - Ajudando seu blog a subir no ranking de pesquisas
    Oláá! tudo bem com vocês? espero que sim! sei que  o blog está a um tempinho sem postagens novas, mas eu tive um problema com o servid...
  • Freebies: Capas/Banners editáveis para seu canal - Download gratuito
    Oláá, tudo bem com você? eu espero que sim! a bastante tempo eu não postava nenhum freebie , então hoje resolvi fazer um teste. Fiz al...
  • Shampoo e condicionador BBB de 5 Reais - Linha Óleo de Argan Tok Bothânico
    Shampoo e condicionador Tok Bothânico Óleo de Argan Oláá! tudo bem com vocês? espero que sim! Hoje eu vim trazer a resenha daqueles...
  • Resenha: O Beijo Traiçoeiro - Erin Beaty
    Oláá! tudo bem com vocês? eu espero que sim! Hoje eu trago mais uma resenha de livro, e de um gênero que todo mundo sabe que não ...
  • Comprinhas da China: Pinceis de maquiagem profissionais no Aliexpress - Jessup Beauty
    Oláá! tudo bem com vocês? eu espero que sim! hoje eu trago a segunda resenha do ano! Pinceis de maquiagem profissionais no Aliexpress ....
Beleza Nerd | www.gleicyhaner.com.br - Todos os direitos reservados © 2013 - 2016
Tecnologia do Blogger | Desenvolvimento: Diamonds Designs