sexta-feira, 26 de julho de 2013

Crie seu próprio efeito!

| |

Olá, amores.

Estou muito feliz, hoje vi minha amiga que mudou de escola, estava morrendo de saudades dela. ♥
Cheguei em casa às duas, mas Jogos Vorazes me viciou (apesar de estar lendo-o pela segunda vez). Ontem eu assisti Percy Jackson e o Ladrão de Raios. Não me matem, mas eu achei bom. Não virei filha de Atena, talvez se eu ler o livro.

Estou feliz também por que a linda, maravilhosa, diva e fofa da Be - Soltando Balões - pediu um tutorial para que eu postasse. Cara, eu amo essa guria *u* 
Ignorem a primeira parte, somos tributos e estávamos conversando sobre os buttons do Jogos. Vou tentar ser o mais clara possível, ok?
Lembrando que existem vários tutoriais por aí, mas eu que fiz esse baseado no que aprendi.
O primeiro de tudo é a estrutura, e então, no seu bloco de notas, cole:
.nome do seu efeito{
colocaremos mais tarde
}
.nome do seu efeito:hover{
colocaremos mais tarde
}
Coloque o nome do seu efeito onde está indicado,
Quem já sabe criar efeitos, faz direto. Mas eu uso um site onde você pode criar a partir das ferramentas do site. Entre aqui e se você já sabe, personalize como quer, se não, preste atenção.
Quando estou criando meus efeitos, vou para a aba CSS Transition. Lá terá uma lista que é onde você personalizará seu efeito. Onde está escrito Transition Duration é a duração do efeito, quanto mais você aumenta, mais devagar será.
Um pouco mais abaixo, tem dois botõezinhos: Normal e On Hover. Normal é quando o mouse não está sobre a imagem. Você pode ajustar a rotação em Rotate, o tamanho em Scale, a inclinação em Skew e se ele vai para a direita ou esquerda em Translate.
Veja o print:

Para visualizar, clique em save e passe o mouse no retângulo onde está escrito CSS 3.0 Transition. Quando terminar, clique em On Hover e personalize como seria se o mouse estivesse sobre a imagem. Salve. Copie o código que está do outro lado da tela.

Siga as indicações na imagem. Recomendo testar em um blog de testes, para não ocorrer nenhum erro.
Cole o código pronto acima de ]]></b:skin> e salve.
Num gadget HTML/JavaScript, cole:
<a href="URL" title="NOME"><img src="IMAGEM" class="NomeDoSeuEfeito" /></a>
Você tem que colocar exatamente o nome do seu efeito em todos os lugares indicados. Por exemplo, se no HTML você colocou beijomeliga, no gadget tem que estar beijomeliga. Entendido?

Espero que gostem, e peçam mais ^^

11 comentários :

  1. AAH eu amo tanto esse site <3 É muito melhor do que fazer efeitos pelo blogger mesmo, tendo que salvar, atualizar, etc etc... Além de que os códigos ai já vem prontos praticamente, é só soltar a imaginação e pronto u3u
    Eu preciso ler Jogos Vorazes, gente. c-c

    ResponderExcluir
    Respostas
    1. Eu também, me ajuda muito :3
      Lê logo, Sag, é muito perfeito *-*

      Excluir
  2. Estou me sentindo honrada com os elogios.. também te amo ♥
    Obrigada por postar o tutorial, já comecei a fazer um, espero que dê certo :)

    ResponderExcluir
    Respostas
    1. Nhack, não foi nada u3u
      Calma, a Be ME ama? #patiu #morrer #de #fofura heuheuh' ♥
      Tomara mesmo, espero ter ajudado

      Excluir
  3. Eu adoro fazer efeitos >3< Sou tributo também *--*

    Beijos ~
    garotas-cupcakes

    ResponderExcluir
  4. Omg, esse site faz tudo, obrigado por ter ensinado a usar e a fazer eu acha-lo, haha :D ♥
    Eloísa do Having Cherry e Gave Crazy

    ResponderExcluir
  5. desculpe mais nao me ajudou, não funcionou, mais vocês explicaram super bem
    falogarota.blogspot.com

    ResponderExcluir
  6. Ai que divo ♥ muito obg ^^ sempre quis aprender *-*
    Heart Tutoriais

    ResponderExcluir

Oi sweet! Eu a-m-o comentários, mas siga essas regras, ok?

x NÃO fale palavrões;
x Se for me ofender, que seja com classe, pois irei responder do mesmo jeito;
x Não aceito comentário tipo "Seguindo, segue de volta?"ou "Visita meu blog?". Custa ler o post?;
x Pedidos - post, tutoriais e etc. -, divulgações, afiliações, parcerias e tal, peça pelo fomulário de contato, na página Contato.

Leu tudo? Agora pode comentar :)