tadarank afiliados

01 agosto, 2006

Tableless - Menu com curvas e semi-transparente - parte 2

Veja a primeira parte deste tutorial de menu semi-transparente com bordas curvas aqui.

2. A Transparência

Agora que já preparamos as bordas curvas do menu, é hora de aplicar o CSS da transparência.
Antes, caso tenha esquecido, veja novamente uma prévia do menu:

Menu curvo semi-transparente

Os principais problemas na hora de aplicar transparencias e alpha são as diferenças entre os navegadores.

O Internet Explorer 6.0 entende o filter: alpha(Opacity=60);. Já o Firefox (e imagino que os outros da engine Gecko) entende o opacity: .6;. Há também o -khtml-opacity: .6; usado pela engine KHTML (Safari e Konqueror) (Não abri meu linux pra testar não. Quem puder testar e dar seu depoimento... :) ) .

Como o próprio nome diz, ao se colocar o valor 100 ao filter alpha opacity no IE o elemento não fica transparente. Quanto menor o valor do opacity, mais transparente o elemento.
Da mesma forma, se colocarmos o valor 1 no opacity no Firefox, o elemento não ficará transparente.

Às vezes, o Firefox transmite a transparência aos filhos. Ainda não consegui identificar quando isso acontece. Para que esta característica não nos atrapalhe, escolheremos uma cor de letra que seja parecida com o fundo e contraste bastante com o background-color do LI, reduzindo visualmente esta possível transparência que pode vir a ser herdada.

Como a cor da imagem que escolhemos no post anterior para fazer a borda é branca, a cor de fundo do restante do menu também deve ser branca para que não haja diferenças entre elas.

Para a cor da letra, escolhemos #3C6B97 por ser uma cor que se parece com a cor de fundo e contrasta bem com o branco do background.

Aplicando

Vamos recuperar os estilos aplicados no #nav no post anterior e vamos adicionar estas novas características.

.curva-base {
  height:10px;
  overflow:hidden;
  background-image:url(curva-base.gif);
  opacity: .6; filter: alpha(Opacity=60); -khtml-opacity: .6;
}
#nav {
  width:190px;
  background: url(curva-topo.gif) top no-repeat;
  opacity: .6; filter: alpha(Opacity=60); -khtml-opacity: .6;
  padding-top:10px;
}
#nav li {
  background-color:#FFFFFF;
  border-bottom:1px solid #000000;
}

O XHTML não muda em nada:

<ul id="nav" >
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
</ul>
<div class="curva-base"></div>

Seu menu agora deve ter ficado mais ou menos assim:

Menu curvo transparente completo

Pronto. Agora é só estilizar as demais características que desejar.

Este tutorial foi testado no Firefox 1.5; Internet Explorer 6.0 e Opera 8.54. Sendo que neste último, a transparência não funcionou comigo, apesar de com a marcinha ter funcionado.
Quem puder realizar outros testes em outros navegadores e colocar seu depoimento aqui é bem vindo.

Bom, é isso aí. Té mais povo.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

10 comentários:

  1. Daew mico, mto bom cara, no meu Opera 8.54 funcionou e no Opera 9 tbm

    =)

    Flw ae

    ResponderExcluir
  2. Olha o meu menuzinho aih de novooo! :)

    Funcionou, como eu disse. Mas ateh o texto ficou transparente eheheh
    Se um dia vc conseguir a correção, seria bom postar, pq eu não achei aqui..

    ;*

    ResponderExcluir
  3. Bem legal cara!
    Vou testar aqui, e te falo o resultado!

    Abraços!

    ResponderExcluir
  4. Ficou muito bom, resolvel absurdos o meu problema, eu criei um pop up para uma aplicação, para que o texto e todo o resto não ficasse transparente, a div que apresentará o conteúdo não poderá ser filha da div que faz a transparencia. A solução que encontrei foi a seguinte:
    < div id="transparencia" >&nbsp< / div >
    < div id="texto" > bla bla < / div >
    usando z-index para definir a posição de cada uma das divs em relação ao layout principal.

    Abraços

    ResponderExcluir
  5. ficou muito bom.
    ta de parabens!!!

    abraços

    ResponderExcluir
  6. Funfar funfou, mas não passa na validação, em sites meu só entra código padronizado ;D

    Mas mesmo assim valew, ótimo tutorial, esse menu do tutorial ficou rulez!

    []'s

    ResponderExcluir
  7. Muito obrigado!!!!!!!
    Ajudou d+!!!!!! XD

    ResponderExcluir
  8. To me debatendo com o novo sistema do blogger... esse tutorial seu aí foi mto bom, mas eu queria saber como é que faz pra só o background ficar transparente, e o texto não. =( Pq eu posto imagens e é uma merda elas ficarem transparentes tbm ahah. Se puder ajudar meu email é nocturnine5@yahoo.com.br

    ResponderExcluir
  9. será que tem como vc recolocar essa imagens ai fazendo favor!
    obrigadoo ....

    ResponderExcluir

Resultado! Concursos