para imagens, mas, como a postagem ficaria muito longa, vou deixar para a proxima >3< Teremos muitos codigos pela frente, entao, para nao se perder, recomendo abrir o bloco de notas ou mesmo o Word (onde voce ainda tera os destaques em negrito/italico/sublinhado). Vamos la!Modo normalO codigo abaixo refere-se a apresentacao normal do menu. Troque "NOMEDOEFEITO" pelo nome que voce dara ao efeito (obviamente), sem usar espacos. Coloquei algumas "sugestoes", caso nao queira alguma, apague a linha correspondente:.NOMEDOEFEITO {color:#fff; /* cor do texto */font-family: X; /* fonte */font-size: Xpx; /* tamanho da fonte */text-transform: X; /* uppercase p/ tudo maiusculo, lowercase p/ minusculo */letter-spacing: 0px; /* espacamento das letras */text-align: center; /* alinhamento do texto */text-shadow: 1px 1px 1px #fff; /* sombra do texto */box-shadow: inset 1px 1px 1px #fff; /* sombra da caixa */width: Xpx; /* largura */height: Xpx; /* altura */margin: 1px 1px 1px 1px; /* margem */padding: 2px 2px 2px 2px; /* acolchoamento */background: #X; /* cor do fundo */border-radius: Xpx Xpx Xpx Xpx; /* borda arredondada */border: 1px solid #fff; /* borda */transition-duration: 0.8s; /* transicao lenta */-webkit-transition-duration: 0.8s; /* transicao lenta */-moz-transition-duration: 0.8s; /* transicao lenta */}Como personalizar a borda:1px - tamanhosolid - linha reta. Para pontinhada, troque para dotted, e, para tracejada, dashed#fff - cor da bordaPara colocar uma imagem ao inves de cor no fundo, troque a linha por:background: url(LINK DA SUA IMAGEM) Fora tudo isso, voce tambem pode acrescentar:font-style: italic; /* italico */text-decoration: bold; /* negrito */text-decoration: underline; /* sublinhado */text-decoration: line-through; /* tachado */text-decoration: overline; /* linha acima do texto */Modo hoverEste e o codigo do menu quando voce passa o mouse. Coloque apenas o que voce quer que seja alterado neste modo. Por exemplo, se quer que a cor de fundo mude, acrescente background: #COR;. Nao esqueca de alterar para o nome do efeito..NOMEDOEFEITO:hover {EFEITOS AQUI}Outros efeitos:ROTACAOtransform: rotate(ANGULOdeg) ;-webkit-transform: rotate(0deg) ;-moz-transform: rotate(0deg) ;-o-transform: rotate(0deg) ;-ms-transform: rotate(0deg) ;MIGRARtransform: translate(LADOSpx, CIMA/BAIXOpx);-webkit-transform: translate(16px, 0px);-moz-transform: translate(16px, 0px);-o-transform: translate(16px, 0px);-ms-transform: translate(16px, 0px);TAMANHOtransform: scale(largura, altura);-webkit-transform: scale(0.835, 1);-moz-transform: scale(0.835, 1);-o-transform: scale(0.835, 1);-ms-transform: scale(0.835, 1);DEFORMACAOtransform: skew(LADOSdeg, CIMA/BAIXOdeg) ;-webkit-transform: skew(2deg, 0deg) ;-moz-transform: skew(2deg, 0deg) ;-o-transform: skew(2deg, 0deg) ;-ms-transform: skew(2deg, 0deg) ;+ = baixo / direita- = cima / esquerdaNo HTMLColoque ambos codigos desta maneira:.NOMEDOEFEITO {efeitos do modo normal}.NOMEDOEFEITO:hover {efeitos do modo hover}E, em seguida, cole acima de ]]></b:skin>.No gadgetCole o codigo abaixo em um gadget de HTML/Javascript (mais uma vez: nao esqueca de alterar o nome do efeito):<center><a href="LINK"><div class="NOMEDOEFEITO">TEXTO</a></div><a href="LINK"><div class="NOMEDOEFEITO">TEXTO</a></div><a href="LINK"><div class="NOMEDOEFEITO">TEXTO</a></div><a href="LINK"><div class="NOMEDOEFEITO">TEXTO</a></div></center>Visualize o efeito. Provavelmente, nao estara do jeitinho que voce planejou. Va alterando o codigo ate estar bonitinho.Espero que tenham gostado do tutorial! Se foi de alguma ajuda ou se voce usara, por favor coloque creditos, porque foi bem demorado para organizar tudo isso hahahaTantas explicacoes me deram a ideia de criar uma pagina explicando um pouco sobre HTML basico, como um indice de codigos. Dessa forma, voces poderiam ir direto no efeito desejado, nao seria necessario explicar tudo isso em todo post, e poderia ajudar quem nao tem tanta experiencia nessa area. O que voces acham? :)~Abracos!P.S.: meu computador esta com alguns probleminhas novamente, e