18 de fev. de 2014

Aviso + 2 tutoriais - Faixinha na sidebar e Criar o próprio efeito

Os pedidos de tutoriais vou fazendo quando posso, estou muito atarefada, minha mãe
ainda não está curada dos braços e com este tempo quente vem a asma e com ela
muita preocupação. Espero que compreendam ♥.
Hoje vim postar 2 tutoriais que foi pedido por Dessa,
Colocar Ribbon ( Faixinha ) no titulo dos gadgets e como fazer seu próprio efeito.
Ribbon ( Faixinha ) no titulo dos gadgets:


1. Vá em Design > Editar HTML e procure por:

/* Mobile

2. Antes de body.mobile cole:


.sidebar .widget h2{ 
background: url(LINK DA SUA FAIXINHA) no-repeat left; 
margin-top:-2px;
margin-left:-19px;
margin-bottom:0px;
padding:15px; 
width:150%; 
overflow:hidden;
}


Faixinhas para titulo da sidebar: Crazy Bomby

Fazendo seu próprio efeito:
 Eu uso um site onde você pode criar a partir das ferramentas do site. Entre css3maker  e se você já sabe, personalize como quer, se não, preste atenção:

Quando quero criar efeitos, vou para a aba CSS Transition. Lá tem uma lista onde você personalizará o efeito. Onde está escrito Transition Duration é a duração do efeito, 
quanto mais você aumenta, mais devagar será seu efeito.

Um pouco mais abaixo, tem dois botões: 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.


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:




Para colocar em seu blog:

Cole o código pronto acima de ]]></b:skin> e salve.

.nome do seu efeito{
código do efeito
}
.nome do seu efeito: hover{
código do efeito em hover
}
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. 

10 comentários :

  1. Melhoras pra sua mãe

    ResponderExcluir
  2. Melhoras à sua mãe ;'( Nossa, fazer efeitos é muuuuito fácil msm!! Já fiz uns 10!! Obrigada ;)

    http://justdream-official.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Biah, realmente neste site fica tudo muito fácil.
      Obrigada, hoje, minha mãe está melhor.

      Excluir
  3. Ajudou mesmo queria tanto fazer meus proprios efeitos <3 e consegui obg <33 sempre me ajudando *--*

    ResponderExcluir

Qualquer dúvida pergunte que
responderei com prazer.
Só peço que seu comentário
seja relacionado à postagem.

© Princess Tutoriais- Agradece sua visita
2014. Todos os direitos reservados
Pedidos? dúvidas? nos comentários ou na Ask.
imagem-logo