Tutorial - Efeito Always (^▽^)/


Konnichiwa, minna-san. (•ω•)ノ Acreditam que já estou com vontade de mudar o template do blog novamente? Eu acho que sinto-me um pouco ridícula ao ver blogs com templates melhores e vou tentando superar-me. Acham que deveria mudar? Pois estou na dúvida quanto á isso.

Na verdade, para ser exata, estou pensando em mudar o blog por inteiro. Sinto como se ele não fosse totalmente meu, e que estou presa a algo/alguém que está bloqueando-me, de certa forma. Ainda não sei ao que é ou o que é, mas acho que descobrirei em breve...



Enfim, eu tenho que para de falar "Enfim", hoje venho trazendo o efeito que uso atualmente no gadget de "Membros", o Efeito Always. Eu, necessariamente, não sei o por que deste nome, mas como não tenho outro para dar, fica com esse mesmo. Caso tenha mudado algo, visualize o efeito aqui.

Vá em: Modelo > Editar HTML > Expanda a primeira seta. Dê Ctrl F ou F3 e procure por: ]]></b:skin>. Acima desta tag, cole:

.always {
transition:All 0.5868s ease-in;
-webkit-transition:All 0.5868s ease-in;
-moz-transition:All 0.5868s ease-in;
-o-transition:All 0.5868s ease-in;
transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-ms-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
padding: 1px;
border: 1px solid #cor_borda;
}
.always:hover{
transform: rotate(16deg) scale(1.186) skew(0deg) translate(0px);
-webkit-transform: rotate(16deg) scale(1.186) skew(0deg) translate(0px);
-moz-transform: rotate(16deg) scale(1.186) skew(0deg) translate(0px);
-o-transform: rotate(16deg) scale(1.186) skew(0deg) translate(0px);
-ms-transform: rotate(16deg) scale(1.186) skew(0deg) translate(0px);
}

Modifique as partes na qual destaquei em negrito. É apenas uma coisa, que seria a cor da borda. Devo admitir que o efeito não é algo tão elaborado assim, mas ainda estou aprendendo. Tendo calma e paciência tudo consegue-se.

Agora, vá em: Layout > Adicionar Gadget > HTML/Javascript. Neste novo gadget cole o código abaixo:

<img src="URL_DA_IMAGEM" class="always" />

Assim como no código anterior, modifique as partes destacadas em negritos. Que, novamente, é apenas uma: o link da imagem em que quer aplicar o efeito. Bem, é apenas isso. Aguardem as mudanças e as novidades

Chu~ 
Ana

7 comentários:

  1. Fofo!

    http://morango-sabor.blogspot.com.br

    ResponderExcluir
  2. Adorei! Muito bom o tuto e o efeito

    vidadeumasone.blogspot.com

    ResponderExcluir
  3. Que lindo <3 Amei o efeito 'u'

    HTML Detected

    ResponderExcluir
  4. Lindo o efeito Ana, espero que descubra isso logo ! Bjs, Dazzle ♥ | Ready Hurricane ★

    ResponderExcluir
    Respostas
    1. Obrigada <3

      ~ É acho que estou quase lá. Obrigada por ler a postagem.

      Excluir