Efeito "bown"

Como não amar a diva Shin Hye?
Hey amoras, hoje iremos aprender o tutorial de um efeito bem fofinho *3* ele foi feito exclusivamente por mim e inspirado no efeito shaking da Isa do blog "Eu amo html". Eu particularmente adorei este efeito e dei a ele um toque especial de borda com P&B e o resultado foi o que eu realmente esperava, se quiserem, olhem do ʕ→ᴥ←ʔ preview ʕ→ᴥ←ʔ do efeito. Vamos aprender a usa-lo? Então, vem comigooo 0_0!
 Antes de tudo, peço que se usarem ele mude somente o autorizado, não reblogue, não faça plágio e dê os devidos créditos a mim ou a meu blog! Agora sim, se compreenderem isso, vamos aprende-lo.
Primeiro de tudo, vocês vão em Modelo -> Editar HTML -> Click dentro de campo de códigos e dê Ctrl+F ->  Pesquise por: ]]></b:skin> e antes dele cole este código abaixo:
@-webkit-keyframes efeito-bown {
0% {-webkit-transform: rotate(-6deg); }
25% {-webkit-transform: rotate(4deg); }
50% {-webkit-transform: rotate(-5deg); }
}
@-moz-keyframes efeito-bown {
0% {-moz-transform: rotate(-6deg); }
25% {-moz-transform: rotate(4deg); }
50% {-moz-transform: rotate(-5deg); }
}
.efeito-bown {
outline-offset: -3px;
outline: 1px dashed #9ecea2;
-webkit-filter: grayscale(100%);
-webkit-transition: 0.70s;
box-shadow: 0px 0px 4px #9ecea2;
opacity: 0.8;
}
.efeito-bown:hover {
-webkit-filter: grayscale(0%);
-webkit-animation: efeito-bown .7s alternate infinite linear;
opacity: 1.0;
}
OBS: Para entendermos melhor os códigos, foram usados:
Rotate: Efeito usado para o toque de movimento giratório.
Outline: Borda interna.
Gayscale: Efeito Preto&Branco.
Opacity: Opacidade da imagem.
Transition: Transição, tempo, duração de um efeito para outro (hover).

Agora vão em Layout -> Adicionar um gadget -> HTML/JavaScript e cole o código abaixo:
<center>
<a href="LINK" title="NOME DO BLOG"><img class="efeito-bown" src="http://i.imgur.com/EYawycr.png" /></a>
<a href="LINK" title="NOME DO BLOG"><img class="efeito-bown" src="http://i.imgur.com/EYawycr.png" /></a>
<a href="LINK" title="NOME DO BLOG"><img class="efeito-bown" src="http://i.imgur.com/EYawycr.png" /></a>
<a href="LINK" title="NOME DO BLOG"><img class="efeito-bown" src="http://i.imgur.com/EYawycr.png" /></a>
<a href="LINK" title="NOME DO BLOG"><img class="efeito-bown" src="http://i.imgur.com/EYawycr.png" /></a>
</center>
OBS: Para entendermos melhor os códigos, foram usados:
Link: O url do blog ou link direcionado.
Nome do blog: Texto que você quer que apareça na tooltip ou nome do blog/link.
Caso queira trocar a imagem, onde está grifado de negrito, troque pelo o url da sua imagem.

Então é isso por hoje amoras, espero que tenham gostado e entendido, fiquem com Deus e xoxo.




12 comentários:

  1. A qe ola carol szsz
    O EFEITO ESTÁ UMA PERFEIÇÃO Q DIWO SZ
    TALVEZ EU USE EM UM LAY MEU
    caps pra seduzir qe
    kisses ~~ http://s-evendays.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oee Nagaswa que bom que gostou vagaba -q espero que use mesmo amora! Visitarei seu blog ♡ xoxo ♡.

      Excluir
  2. O efeito ficou lindo e ficou um amor *3* adorei, mesmo ♥

    Beijos <3
    Henndrauhl | visite!

    ResponderExcluir
    Respostas
    1. Também achei Thai, afinal, é o meu primeiro deste modo heuheue, fico feliz por isso! Visitarei seu blog ♡ xoxo ♡.

      Excluir
  3. Achei esse menu super fofinho!
    Bem que você podia fazer um layout free de previews né? Tipo esse seu!
    || d i a m o n d s o n g a l a x y ||

    ResponderExcluir
    Respostas
    1. Que bom que gostou Jéssica, adorei está ideia, provavelmente farei sim ^3^ visitarei, ♡ xoxo ♡.

      Excluir
  4. que efeito lindo é esse? <3

    http://thesweetmomentts.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada Laís, fico muito feliz por ter gostado amora. Visitarei seu blog, xoxo.

      Excluir
  5. Que efeito fofo <3 (Amei o Layout do Blog de preview <3 Tu é diva <3).

    Respondendo suas perguntas do meu Blog:
    Não sei o nome do efeito do menu-topo ;^; Não fui eu quem fiz o Layout, é um skin do Blogskins. E o efeito de abrir a página sem carregar também não sei. Só sei que para utilizar esse efeito é preciso reverter o modelo do HTML do Blogger para o modelo clássico.

    >> b-rasiaticos.blogspot.com.br/
    - C h u ~

    ResponderExcluir
    Respostas
    1. Fico feliz por ter gostado Rafa, que bom que gostou do layout heuehu pois é, vou ter que procurar mais um pouco mais obrigada. Visitarei seu blog, xoxo.

      Excluir
  6. Lovely post
    love your blog
    would you like to follow each other ?
    I'll follow back after It

    Www.miharujulie.com

    ResponderExcluir
    Respostas
    1. Thanks Miharu to good.
      ♥♥ I'm glad for that! ♥♥
      I'm following because we loved the content, expect to be thanked, xoxo.

      Excluir

Please leia:
- Comente sempre em relação ao post.
- Caso queira usar ~> ♡
xoxo e obrigada aos comentários.

≧ω≦ © Mini Realeza - 2015 por Carol Sgomes | | Todos os direitos reservados - Tecnologia do Blogger ≧ω≦