04/07/2013

Propriedades: Efeito Rotate no blog

||

Olá pessoal!!!! Devo pedir mil desculpas pelo meu sumiço repentino essa semana, meu computador fecho tive que levar para formatar. Também tenho uma péssima noticia o blog entrara em hiatos. Sim isso mesmo...  ficarei fora umas duas ou três semanas. Terei que fazer uma viagem urgente e só poderei voltar quando tudo estiver resolvido. Talvez eu volte antes, torço que sim porque odeio ficar longe do blog. Mas vamos a um tutorial hoje? Me pediram para postar duas coisas como criar aquele bonequinho personalizado da pag do facebook ou twitter como a sidebar hover que usei no template free Uta Orange. Hoje irei mostrar como adicionar aquele efeito hover na sidebar, ele pode ser adicionado em vários lugares não só na sidebar.


Os código padrão do efeito e esse:
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
}

Com esse código pode se fazer diversos efeitos. Você pode faze-lo girar para direita, esquerda ou dar uma volta inteira como pode deixa-lo torto e ao passar o mouse ele mude de lado para isso terá que usar efeito hover. O código é bem fácil de arruma e só mexer no 3deg. Vou dar alguns exemplos de códigos já prontos e depois explicar.


Modelo 1: Preview

-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-o-transform: rotate(6deg);

O mesmo que usei na sidebar do layout o código básico. A forma que usei na layout foi em hover ou seja  apenas aparece quando passarem o mouse.


Modelo 2: Preview

-webkit-transform: rotate(-100deg);
-moz-transform: rotate(-100deg);
-o-transform: rotate(-100deg);

Nesse apenas aumentei o tamanho do deg e posição. Para mudar a posição é o mesmo de usar gadget flutuantes. Em gadget flutuante usamos 200px ou -200px para mover a direita ou esquerda ate encaixar onde desejamos correto? Nesse código usamos as mesmas regras mas em vez de px usamos o deg. Se você adicionar (-) na frente da numeração ele vira para direita se remover e deixar apenas o número ele gira para a esquerda.


Modelo 3: Preview

-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);

Parte hover

-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-o-transform: rotate(50deg);

Nesse coloquei a imagem já virada e na segunda parte de código (hover) eu coloquei ao contrario. Resumindo na primeira parte eu coloquei (-) e na ultima eu removi o (-) usando a explicação anterior.


Modelo 4: Preview

-webkit-transition-duration: .50s;
-moz-transform: rotate(620deg);
-webkit-transform: rotate(620deg);
 -o-transform: rotate(620deg);
-ms-transform: rotate(620deg);
transform: rotate(620deg);

Se você observar eu coloquei 620deg você também pode colocar números grandes para que deem uma volta grande. Eu apenas adicionei mais um trechinhos para que o efeito se estendesse.

Agora irei mostrar como adicionar em algum lugar do seu template ou imagem, também vou explicar como usar em efeito hover. Sei que muitos já sabem mas sempre tem iniciantes então é bom sempre explicar direitinho.


Adicionar em uma imagem:

Esse é o código padrão para efeito de imagem, apenas adicionei umas coisas. O código é auto explicativo então nem preciso entrar em detalhes.

.imagem1 { → nome do menu ou efeito
margin: 3px; → margem
border: 2px solid #BCAD90;→ borda
-webkit-transition-duration: .50s; → transição
-webkit-transform: rotate(3deg); → código para rodar
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
}

Adicionar em  Hover:

Tem duas formas de fazer em hover:  aparecer só quando passarem o mouse ou já com o efeito e mudar quando passarem o mouse. Se desejar que o efeito apareça só quando passar o mouse faça como no código abaixo. Apenas adicione na parte que fica :hover {

.imagem1 { → nome do menu ou efeito
margin: 3px; → margem
border: 2px solid #BCAD90; → borda
-webkit-transition-duration: .50s; → transição
}
.imagem1:hover {
-webkit-transform: rotate(3deg); → código para rodar
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);}

Agora faremos como no modelo 4 onde já fica torto e ao passar o mouse muda de posição para isso você adiciona o efeito nas duas partes do código. Veja o exemplo:

.imagem1 { → nome do menu ou efeito
margin: 3px; → margem
border: 2px solid #BCAD90;→ borda
-webkit-transform: rotate(-10deg); → código para rodar
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
.imagem1:hover {
-webkit-transform: rotate(50deg); → código para rodar
-moz-transform: rotate(50deg);
-o-transform: rotate(50deg);
}

Adicionando em qualquer parte do blog:

Procure pela parte do código que você deseja adicionar, eu vou usar o código da sidebar como explicação. O código inicial da sidebar é .sidebar .widget { então usando o Ctrl +f procure por ela. Você vai encontrar algo similar a isso é claro que o código de sua sidebar pode ser diferente, mas isso não importa e só achar onde ela fica que funciona da mesma forma.

.sidebar .widget {→ inicial da sidebar
background: #fff;  → fundo da sidebar
padding: 5px 10px; → divisão
box-shadow: 0px 1px 1px #E7E7E7;
}
.sidebar .widget:hover { →    inicial da sidebar em hover
background: #fff; → fundo da sidebar
-webkit-transform: rotate(3deg); → código para rodar
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
}

Deu para entender? Nesse código eu adicionei na parte em hover então só vai aparecer quando passar o mouse se você desejar que já fique tortinho é só usar a explicação que fiz anterior a essa. É simples e só procurar a onde você deseja adicionar, fico um tantinho grande a post né? rsrs Mas é bem fácil de entender apenas quiz fazer bem explicado e espero que tenham entendido. Antes de terminar quero creditar o AFY pelos avatares. Bem eu vou indo espero que tenham gostado da postagem e entendido qualquer duvida é só perguntar, ate aproxima e bye bye....

OBS: Obrigada pelo tanto de comentários na postagem anterior, ainda estou moderando não consegui responder todos. Sorry os erros de português desta postagem depois eu corrijo.

24 comentários:

  1. Adorei o efeito. Muito legal. Beijos, V-odka.

    ResponderExcluir
  2. Muito bom o efeito, parabéns pelas explicações. Eu sou nova e é sempre bom para mim quando vejo bem explicado.

    http://mundodeliina.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada, verdade eu mesma tive dificuldades quando aprendi. Então sempre tento ser o mais clara possível *-*

      Obrigada por comentar Carol

      Excluir
  3. Adorei o tutorial e o efeito também ^.^
    cr4zy-world.blogspot.com

    ResponderExcluir
  4. Oi! Adorei, principalmente o primeiro modelo, é lindo! *--*
    Vou testar no layout que to criando!
    Beijinhos ♥

    Uma ovelha mais que negra ♥

    ResponderExcluir
    Respostas
    1. Testa sim espero que de certo

      Excluir
  5. Gostei muito, principalmente do 4!


    Beijos, Uma quase nerd!

    ResponderExcluir
  6. Amei o tutorial, gostei bastante do efeito 4 *uu*


    Beijos da Mylena♥
    Ps: Estou seguindo seu blog, pode me ajudar retribuindo? Obg♥
    cacadoradeborboletas-blg.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada, darei uma passadinha com certeza se eu gostar eu sigo ^.-

      Excluir
  7. Muito bom o tutorial! Estou pensando seriamente em usar esses efeitos no meu próximo layout free >3<

    Kissus!
    > gomy-kawaii.blogspot.com.br

    ResponderExcluir
    Respostas
    1. o/ Serio vai fazer mais um free ebaaaaaa!!! Usando ou não o efeito estarei lá para ver.

      Excluir
  8. Nossa flor que lindo esses efeitos eu ameiiii *o*...

    ResponderExcluir
  9. Olá amiga!!
    Boa noite pra vocÊ ^^
    Que lindo este post.Adoro seu blog,tem muita novidade e posts legais *0*
    Vou visitar vc sempre que eu puder,viu ? :D

    Ah,saiu um novo post lá, é o volume 13. Não deixe de Conferir lá:

    http://gliter-lovely.blogspot.com.br/

    bjoooos
    Até o/

    ResponderExcluir
    Respostas
    1. Olá obrigada pela sua visita, fico grata por isso. ^^
      Ah já conheço seu blog é muito bom, mas faço uma nova visita com certeza

      Excluir
  10. Gostei do tutorial e de todas as explicações o efeito é lindo *--*

    Muito bem explicado *--*

    ResponderExcluir
  11. Que lindo!
    Amei todos, mas amei mais o primeiro♥
    Bem fofo e útil, e você explicou direitinho.
    Passando para deseja um ótimo fim de semana.
    Yuizinha/Animes

    ResponderExcluir
    Respostas
    1. Sunny quanto tempo!!!! Que bom, que gostou.
      >///< Ainda bem que deu para entender sou meio enrolada com essas coisas kkk' Obrigada mais uma vez por passar aqui.

      Excluir
  12. Adorei o efeito 1 *-*
    Vou usar no Layout que estou a fazer ^^

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram