7.8.13

Efeito Redondo



Olá, olá crianças!
Bem, eu não postei estes dias lindos, porque estava sem tempo. Quer dizer uns dois dias sem postar não é muita coisa, tem blogs que ficam semanas sem postar haha. Enfim, enfim as aulas começaram e eu ando muito ocupada, estou cheia de trabalhos pra fazer, já fiz umas 3, apresentações só com o mesmo professor. Poxa vida hein? Mas ok, vou falar agora um pouco sobre o efeitinho.


Então, esse efeito é para ser usado nas imagens do blog, eu particularmente acho que fica muito 'top' na elite de afiliados. Ele é uma foto normal com bastante opacidade, quando você passa o mouse ele fica redondinha///uma bolinha e sai toda a opacidade. Ele fica assim por 17 segundos, mas você pode aumentar ou diminuir o tempo, enfim, e depois dos (17) segundos ele volta a ser opaco e quadrado novamente, se você não entendeu veja AQUI A PREVIEW prossiga se gostar <3 lindjos




1. Vá em Modelo > Editar HTML > dê um F3 e procure por ]]></b:skin>, acima disso cole:

/*EFEITO REDONDO POR SWEET FLOWER // sweeet-flower.blogspot.com*/
.redondo {-webkit-filter: opacity(0.6);-moz-filter: opacity(0.6);-ms-filter: opacity(0.6);-o-filter: opacity(0.6);filter: opacity(0.6);-khtml-filter: opacity(0.6); border-radius: 0px; -webkit-border-radius: 0;-moz-border-radius: 0px;  -ms-border-radius: 0px;-khtml-border-radius:0;-o-border-radius: 0px;  -webkit-transition-duration: 17s;-moz-transition-duration: 17s;-ms-transition-duration: 17s;-o-transition-duration: 17s;-khtml-transition-duration: 17s;transition-duration: 17s;}.redondo:hover {-webkit-transition-duration: 5s;-moz-transition-duration: 5s;-ms-transition-duration: 5s;-o-transition-duration: 5s;-khtml-transition-duration: 5s;transition-duration: 5s;-webkit-filter: opacity(1.0);filter: opacity(1.0);-moz-filter: opacity(1.0);-ms-filter: opacity(1.0);-o-filter: opacity(1.0);-khtml-filter: opacity(1.0);} .redondo:hover {-webkit-transition-duration: 1s; transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; -khtml-transition-duration: 1s; border-radius: 100px; -moz-border-radius: 100px;-ms-border-radius: 100px;-o-border-radius: 100px;-khtml-border-radius: 100px;-webkit-border-radius: 100px;-webkit-filter: opacity:(0%);filter: opacity:(0%);-moz-filter: opacity:(0%);-ms-filter: opacity:(0%);-o-filter: opacity:(0%);-khtml-filter: opacity:(0%);}

E depois, vá em Layout > Adicionar um Gadget > HTML Java/Script  e cole o seguinte:

 <center>
<a href="LINK" title="NOME AO PASSAR O MOUSE" target="_blank"><img class="placa" src="URL DA IMAGEM"/></a>   <a href="LINK" title="NOME AO PASSAR O MOUSE" target="_blank"><img class="placa" src="URL DA IMAGEM"/></a>   <a href="LINK" title="NOME AO PASSAR O MOUSE" target="_blank"><img class="placa" src="URL DA IMAGEM"/></a>   <a href="LINK" title="NOME AO PASSAR O MOUSE" target="_blank"><img class="placa" src="URL DA IMAGEM"/></a>   
Agora, vou dar umas básicas explicações pra quem quer modificar o efeito(mas deixem os créditos no começo por favor):  Aonde você ver transition-duration: 17s(incluindo, moz, ms, o & webkit) é só alterar o 17 pelo tanto de segundos que você quer, ex: 19,20,21,25,30,40 enfim é isso. O resto não precisa mexer, à menos que você saiba o que esta fazendo. Enfim, é só, e como sempre se reblogar credite o blog ;D rsrs.



8 comentários:

  1. Simplesmente adorei o efeito! Vou suá-lo no meu próximo template.
    Um grande beijo.
    Nerd Com Chiclete
    Nerd Absoluta

    ResponderExcluir
    Respostas
    1. Obrigada! Que legal, vai ficar muito bonito ><

      Excluir
  2. que tutorial perfeito, ameiii ♥
    aliás, seu blog é lindo. Acabei de criar um blog, adoraria sua visita por lá. Amei o design e o jeito que você escreve, tentarei sempre estar por aqui, porque eu realmente amei seu blog. E estou seguindo com muito prazer (se puder retribuir ficarei bem feliz). bjos :*

    xoxo,
    isabellanani.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada, que bom que gostou!

      Awwns sua fofa valeu, muito obrigada mesmo!
      Obrigada por seguir, retribuo sim <3

      Excluir
  3. Muito lindinho esse efeito,adorei! :3
    beijos,ótima sexta feira!
    quemprecisadetvparaverbeyonce.blogspot.com.br

    ResponderExcluir

Hey, que bom que irá comentar! Mas, leia as regras;

- Comente sobre o post >3<
- Deixe o link do seu blog no final, retribuirei
- Respondo todos os comentários
- Retribuo todos os comentários
- Não comente besteira, nem seja racista :3
- Criticas construtivas são bem vindas :D
- Sigo de Volta todos que me seguirem primeiro.