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

Olá pessoal,

Estive meio sumido sem postar devido ao novo fórum que estamos criando. Acho que todos que visitam por aqui já sabem.
Estamos em desenvolvimento e ficará muito bom.

Hoje resolvi postar algo muito simples e que pode ser útil a todos: Construção de um menu com bordas arredondadas e semi-transparente.
Para não perder o costume, este tutorial foi baseado em um post da marcinha lá no novo fórum. Agradecimentos a ela e ao pessoal que ajudou por lá.
Será um tutorial bem rápido e pequeno.

Bom, vamos começar mostrando uma prévia de como deve ficar nosso menu:

Percebam que temos 2 questões a resolver:

1. Bordas arredondadas
2. Transparência

1. Bordas arredondadas

Enquanto a especificação CSS 3 não chega, nós temos que fazer algumas "gambiarras" se quisermos que um elemento tenha bordas arredondadas.
Nosso amigo Bruno Dulcetti fez o favor de listar algumas destas "gambiarras", pra quem tiver interesse.

A forma que irei utilizar neste tutorial é a seguinte:

• usar 2 imagens, uma para fazer a curva do topo e outra pra fazer a curva da base;
• colocar uma das imagens como background no topo do elemento alvo;
• criar um elemento abaixo do elemento alvo pra receber a curva da base;
• usar um elemento dentro do elemento alvo pra fazer a borda.

As imagens:

As imagens criadas deverão ser gifs e ter a cor do background pretendido para o menu (no caso deste tutorial branco) tendo sua curva transparente.
As imagens (foram colocadas dentro de um div com fundo preto para melhor visualização):

Curva do topo:

Curva da base:

O XHTML do menu:

Uma marcação padrão tableless para menus normalmente é assim:

<ul>
  <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>

Agora que já temos as imagens, vamos alterar o XHTML para receber as curvas.
Como a curva do topo será colocada diretamente no UL através de background, eu precisarei apenas criar 1 (um) novo elemento para receber a curva de baixo.

<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>

Agora o CSS pra fazer a coisa funcionar:

Primeiramente agente colocará a curva-base. Setamos a altura para ter a mesma altura que a imagem e a colocamos como background. Temos também que colocar um overflow:hidden pra evitar problemas com o IE.

.curva-base {
  height:10px;
  overflow:hidden;
  background-image:url(curva-base.gif);
}

Agora faremos a curva do topo colocando a imagem curva-topo como background "no-repeat top". Temos também que dar um espaçamento na altura da imagem para que o texto não fique sobre a curva (padding-top):

#nav {
  width:190px;
  background: url(curva-topo.gif) top no-repeat;
  padding-top:10px;
}

Agora só falta colocar o background pra terminar o corpo do menu. Não podemos colocá-lo direto no UL pois a transparência da imagem irá revelá-lo e não ficará curvo. Temos que colocar o background em algum filho do UL. Pra isso vamos usar o LI:

#nav li {
  background-color:#FFFFFF;
  border-bottom:1px solid #000000;
}

Pronto, agora já temos um menu feio com curvas. No final iremos estilizá-lo por completo.

Percebam que eu coloquei uma classe "curva-base" para receber a imagem da curva do bottom ao invés de utilizar ID. Assim eu poderei reutilizar esta mesma classe em outros menus, economizando código.

Obs.: Existe também a propriedade -moz-border-radius implementada nos browsers Mozilla para fazer as curvas de uma forma mais fácil, porém nos queremos algo para todos os navegadores neste momento.

Ihhh este post está ficando muito grande. Já sei:

No próximo episódio teremos "A TRANSPARÊNCIA" !!!! Não percam...

Update: Próximo episódio pronto. A continuação do tutorial está aqui.

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