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:

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:

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.