- Made By Lisa ☆: Efeito Turns

14.2.17

Efeito Turns

| |
Olá, pessoal!

Demorei muito, mas estou de volta (e o meu computador também)! Porém não posso prometer postagens tão frequentes, já que minhas aulas também voltaram. Esse ano fui para o terceiro, tem vestibular... fora que as aulas começaram a complicar antes do esperado >< De qualquer forma, farei o possível para atualizar aqui pelo menos uma vez por semana!

O tutorial de hoje é o efeito turns, usado atualmente aqui no blog. Nele, temos uma imagem com opacidade baixa que, ao passarmos o mouse, dá um giro, fica mais visível e na forma de um círculo. É bem simples de aplicar, e a edição é de basicamente duas cores. Espero que gostem ><



No seu HTML, cole o código abaixo acima de ]]></b:skin>:

.turns {
border: 1px solid #609087; /* cor da borda externa */
opacity: 0.5;
background-color: #a8bba2; /* cor da borda interna */
padding: 5px 5px 5px 5px;
margin-top: 2px;
margin-bottom: 2px;
transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
}
.turns:hover {
border-radius: 50px;
opacity: 0.9;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

Altere a cor da borda externa (em negrito) e da interna (em itálico).

Em seguida, em um gadget de HTML/Javascript, cole:

<center>
<a href="LINK" title="TÍTULO"><img src="URL DA IMAGEM" class="turns" /></a>
<a href="LINK" title="TÍTULO"><img src="URL DA IMAGEM" class="turns" /></a>
<a href="LINK" title="TÍTULO"><img src="URL DA IMAGEM" class="turns" /></a>
<a href="LINK" title="TÍTULO"><img src="URL DA IMAGEM" class="turns" /></a>
<a href="LINK" title="TÍTULO"><img src="URL DA IMAGEM" class="turns" /></a>
<a href="LINK" title="TÍTULO"><img src="URL DA IMAGEM" class="turns" /></a>
</center>

Substitua os termos em negrito, e pronto~ recomendo usar uma imagem quadrada, ou não acontecerá o mesmo efeito.

Mais uma vez, espero que tenham gostado do tutorial <3 Caso queiram sugerir algum, por favor deixem uma sugestão pelos comentários (≡^∇^≡)

~Abraços!

6 comentários:

  1. Olá Lisa <33 Que bom que agora está de volta! Esse efeito é bonitinho, acho que posso usá-lo em alguma coisa, e o tutorial está bem explicado. Eu gostei do tutorial! Você podia postar menus ou modelos para posts~ Até logo Lisa, abraços também ^^

    ┈━═☆Até
    O Snack Cheese é a queijolândia~ | Ovos e mais ovos e cacarejos! (Vende-se açaí nesse galinheiro) 🐔. 🐤Venham, o Snack Cheese virou galinheiro ♥ 🐥~

    ResponderExcluir
    Respostas
    1. Olá~ Que bom que gostou! E obrigada pela sugestão!

      ~Abraços!

      Excluir
  2. Oh, sim, o famoso terceirão. Mas já Lisa? :o :o Eu terminei o terceiro ano em 2015, agora estou prestes a entrar na universidade - começo essa semana, aaaaaaaa, socorro! E sim, eu fiquei um ano sem estudar, em 2016 eu pretendia apenas trabalhar.
    Vejo que esse efeito é usado na sua lista de afiliados. Fica bem legal :o :o Me lembra muito os layouts da época de 2012, aqueles que a Clara fazia, com esse hover, que saudades!
    O tutorial parece fácil, está bem explicado ^^

    ♡ { Barbie Pretty Sweet } ♡

    ResponderExcluir
    Respostas
    1. Pois é, hahah
      Que bom que gostou >< Adoro esses efeitos, sempre dá uma nostalgia daquela época hahaha

      ~Abraços!

      Excluir
  3. Obrigada! Estava procurando esse efeito ^^

    Naon! - www.naonblog.com

    ResponderExcluir

>> Leia o post antes de comentar;
>> Pedir sdv é deselegante, comente sobre a postagem e então deixe seu link no final do post;
>> Se quiser afiliação, peça por aqui mesmo. Mas peço que assuma o compromisso de me colocar em sua elite, atualizar o seu blog e acompanhar o meu;