24 de jun de 2012

Tutorial - 2 em 1

Oiii!
Faz tempo que não posto um tutorial,né?
Hoje vou ensinar à fazer um menu igual ao do novo lay(perceberam o novo lay?)
E como colocar Efeito Opacity nas imagens.
  Efeito Opacity nas imagens.   
Vá em seu HTML de F3(caixa de pesquisa)e procure por:       ]]></b:skin>     
Depois cole ACIMA  dessa tag este código
.main img {filter:alpha(opacity=82);-moz-opacity:0.82;opacity:0.82;}.main img:hover {filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0;duration: 50s;}


Veja se o feito funcionou comparando sem e com,se tiver tudo certinho salve e seja FELIZ :-)
Menu de Folhinhas.
1- Vá em Design -> Editar HTML -> Aperte CTRL+ F ou F3 e pesquise por:
]]></b:skin>
2-Acima disto cole este código:
 /*---Início do Menu com Efeito by Bomba de Glitter---*/bdg {font-family: tahoma; /* Fonte do Menu */width: 17%; /* Tamanho do Menu */float: left;background:#8EE5EE; /* Cor do fundo do Menu */padding: 5px;text-align: center;margin: 2px;-webkit-border-radius: 9px 0px 9px 0px; /* Pontinhas da Borda - não modifique se quiser o formato igual ao meu */-webkit-transition-duration: .80s; /* Duração do Efeito - não modifique se quiser o efeito igual ao meu */font-size: 08pt; /* Tamanho da fonte */color: #fff; /* Cor da fonte */}bdg:hover {font-family: tahoma; /* Fonte do Menu quando passa o mouse */width: 17%; /* Tamanho do Menu quando passa o mouse */float: left;background:#FF69B4; /* Cor do fundo do Menu quando passa o mouse */padding: 5px;text-align: center;margin: 2px;-webkit-border-radius: 0px 9px 0px 9px; /* Pontinhas da Borda - não modifique se quiser o formato igual ao meu */-webkit-transition-duration: .80s; /* Duração do Efeito - não modifique se quiser o efeito igual ao meu */font-size: 08pt; /* Tamanho da fonte do Menu quando passa o mouse */color: #fff; /* Cor da fonte do Menu quando passa o mouse */}/*---Fim do Menu com Efeito by Bomba de Glitter---*/ 
Para usar o menu use este código no HTML/JavaScript
<a href="Link"><bdg>Nome</bdg></a> 

Tabelas de cores(WWW)
Créditos ao Efeito Opacity(WWW)
Créditos ao Menu de Folhinhas(WWW)
Beeijos espero que tenham gostado desse tutorial e que utilizem*U*

2 comentários:

  1. ótimo tuto! adorei seu blog, é lindo! seguindo. Beijos
    http://mundo-dosadolescentes.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigado,já sigo o seu blog!!!
      Queria saber como achou o Mundo Cat?

      Excluir

Mini F.A.Q^^
- Não comente nada do tipo : ''Seguindo,seque de volta?'' ou ''Tem postagem nova no blog, vai lá ver''.
- Não xingue ou ofenda ninguém nem á mim.
-Críticas, só construtivas.
-Atenção: Os comentários são sempre MODERADOS!!!
- Para pôr link no comentário.
Para ir ao verdadeiro F.A.Q Venha Aqui