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:
Códigos
-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

Códigos
-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

Códigos
-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

Códigos
-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

Códigos
-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.

Códigos
.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 {

Códigos
.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:

Códigos
.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.

Códigos
.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.

23 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
  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. Gostei do tutorial e de todas as explicações o efeito é lindo *--*

    Muito bem explicado *--*

    ResponderExcluir
  10. 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
  11. Anônimo14/7/13

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

    ResponderExcluir
  12. 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

    ResponderExcluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345