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, dã
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 ^^
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
ResponderExcluirEu preciso ler Jogos Vorazes, gente. c-c
Eu também, me ajuda muito :3
ExcluirLê logo, Sag, é muito perfeito *-*
Estou me sentindo honrada com os elogios.. também te amo ♥
ResponderExcluirObrigada por postar o tutorial, já comecei a fazer um, espero que dê certo :)
Nhack, não foi nada u3u
ExcluirCalma, a Be ME ama? #patiu #morrer #de #fofura heuheuh' ♥
Tomara mesmo, espero ter ajudado
Eu adoro fazer efeitos >3< Sou tributo também *--*
ResponderExcluirBeijos ~
garotas-cupcakes
Omg, esse site faz tudo, obrigado por ter ensinado a usar e a fazer eu acha-lo, haha :D ♥
ResponderExcluirEloísa do Having Cherry e Gave Crazy
Own *-*
Excluirdesculpe mais nao me ajudou, não funcionou, mais vocês explicaram super bem
ResponderExcluirfalogarota.blogspot.com
o que houve?
ExcluirAi que divo ♥ muito obg ^^ sempre quis aprender *-*
ResponderExcluirHeart Tutoriais