Começo
aqui o terceiro e último artigo desta série. Irei
abordar um dos temas mais pedidos por e-mail e, talvez, mais complexos,
principalmente para quem está iniciando em webstandards:
os complicados layouts com cantos arredondados. Não são
complicados, mas sim chatos para serem entendidos no início.

Falarei sobre três modos de desenvolvermos
tais layouts: sem a utilização de imagens, utilizando
quatro bordas e utilizando um topo, um corpo e uma base para o
layout. Falarei detalhadamente sobre cada uma, tentando explicar
pra vocês a diferença entre elas, vantagens, desvantagens,
etc.

O layout em si eu criarei me baseando no segundo
artigo, seguindo toda estrutura, lógica do layout, etc.
Falarei primeiramente sobre a versão com três imagens,
uma para o topo, uma para a base e outra para o conteúdo.

Vamos lá.

Cantos arredondados com três imagens.
(Ver
On-line):

body { text-align: center;
} /* deixando o alinhamento do body centralizado
*/

#geral {
width: 530px; /* definindo 530px para a
largura do div */
margin: auto; /* colocando auto, para que
o #geral fique de acordo com o alinhamento do body, ou seja, centralizado
*/
background: #FFF url(“corpo.jpg”) repeat-y; /*
definido o background para branco e a imagem corpo.jpg como fundo
repetindo somente na vertical */
}

#topo {
background: #FFF url(“topo.jpg”) no-repeat; /*
definido o background para branco e a imagem topo.jpg como fundo
sem repetição */
height: 35px; /* definido a altura para
que a imagem de background seja visualizada */
}

#conteudo {
padding: 0 20px; /* definindo padding de
0 para a base e topo e 20px para as laterais para que o conteúdo
não cole nas extremidades */
font: 8pt Verdana; /* definindo a fonte
do texto para Verdana tamanho 8pt */
text-align: left; /* definindo o alinhamento
do texto da div para esquerda, já que a do body está
center */
}

#rodape {
background: #FFF url(“rodape.jpg”) no-repeat; /*
definido o background para branco e a imagem rodape.jpg como fundo
sem repetição */
height: 35px; /* definido a altura para
que a imagem de background seja visualizada */
clear: both; /* definindo o clear para futuras
atualizações que o conteúdo pode ter, com
divs possuindo floats não interfira no rodapé */

}

Este exemplo é o mais fácil de criar,
na minha opinião. Criei três imagens: uma para o
topo, uma para o corpo e outra para a base da estrutura e exportei
como gif. Utilizei somente quatro divs, o #geral, #topo, #conteudo
e #rodape. Para lembrar, o #geral eu utilizo para uma melhor forma
de posicionamento, para os divs internos não precisarem
de position, e o posicionamento depender somente do #geral. Falei
sobre isso mais detalhadamente nos artigos anteriores. Explicarei
melhor, abaixo, sobre cada div e suas características:

- Topo

Como dito no início do artigo, exportei
uma imagem gif para a utilização neste div. Faça
o download da imagem clicando aqui.

Utilizei esta imagem como background do div e defini
somente a altura do div pois, como dito no artigo anterior, se
não declararmos o width, automaticamente ele herda a largura
do seu “pai”, que é o #geral e como ele recebeu
550px de largura, então o #topo fica 100% do #geral que
é o valor 550px.

“Mas por que declarar a altura? Ela não
fica automaticamente com a altura do #geral?” Não
necessariamente. O #geral não recebeu nenhum valor de altura,
então ele ficará de acordo com o conteúdo
do div respectivo, ou seja, o #topo. Mas concorda comigo que o
#topo não possui conteúdo nenhum? Então se
ele não recebe conteúdo nenhum, automaticamente
a altura é 0(zero) e não é o que queremos.
Por isso a utilização do height. ;)

- Rodapé

Aqui não tem mistério nenhum. É
exatamente como a explicação do #topo, pela utilização
do atributo height, da não utilização do
width, a utilização da imagem como background, etc.

Faça o download da imagem do rodapé clicando aqui
. A única coisa de diferente no #rodape é o acréscimo
do clear: both, que falei detalhadamente sobre este atributo no
artigo anterior. Caso tenham dúvida, vejam novamente nele.

Na verdade não seria necessária a
utilização do clear agora, pois é só
um exemplo, mas achei melhor utilizá-lo caso vocês
venham a utilizar este exemplo com o conteúdo com floats,
que pode dar problemas.

- Conteúdo

A parte onde terá o conteúdo do site.
Nada demais no código, somente um padding para o conteúdo
ficar um pouco mais pra dentro do div e não ficar muito
colado nas bordas, dando pra perceber que são dois valores,
o primeiro corresponde ao padding superior e inferior, enquanto
o segundo corresponde pro da direita e esquerda. Um font para
mudar a aparência, tamanho do texto. Muito simples.

- Geral

Agora você deve estar se perguntando (ou
melhor, me perguntando): “Mas aonde eu coloco a imagem de
fundo do corpo? Não seria no #conteudo?”. Bom, poderia
ser, mas como no exemplo do #rodape, que deixei o clear, para
que futuramente, com alguns testes ou modificações
de vocês mesmo, não venham ter problemas na utilização
do código. Faça
o download da imagem do conteúdo clicando aqui .

“Ah sim… Beleza, mas não entendi
ainda por que você colocou.” Calma, explicarei agora.
Esta é uma versão bem simplificada da técnica
FAUX-COLUMNS. Esta técnica é utilizada quando você
possui um site com três colunas, por exemplo, e você
quer colocar uma divisão diferente entre as três
colunas. Acontece que, para utilizar as três colunas, você
precisa de floats, um no div da esquerda e outro no da direita.
Até aí simples demais, mas o único problema
é que, vamos supor que o conteúdo da esquerda não
seja do mesmo tamanho do da direita e do conteúdo, ou qualquer
caso, automaticamente a imagem de background do div irá
parar de acordo com o fim do conteúdo dele próprio.

Não irei cair em detalhes sobre FAUX-COLUMNS
aqui neste artigo, pois não é o foco, mas falarei
no meu Blog sobre este assunto esta semana e mostrarei exemplos
e explicarei seu funcionamento.

Retornando a parte da imagem de fundo ser no #geral.
Neste nosso exemplo, nem precisaria ter colocado, pois o #conteudo
não possui conteúdo nenhum, nenhuma div no interior,
mas como havia mencionado, caso vocês utilizem futuramente,
já tenha pronto. ;)

Quando você utiliza floats em um layout,
a altura do geral só acompanha o div que não possui
o float. Veja um exemplo clicando aqui. Aqui você pode ver
que o div da direita não tem o float, por isso a cor de
background do #geral acompanha a altura, conteúdo do div
da direita. Agora vejamos outro exemplo clicando aqui. Neste exemplo,
podemos ver que o conteúdo do div da esquerda é
maior e ele possui um float: left, com isso, o cinza do #geral
não acompanha o div.

Portanto, se utilizássemos a imagem de background
no #conteudo, poderíamos ter problemas futuros, com a implementação
de div com floats, etc.

Vimos também certas diferenças do
background do #geral para os outros. Enquanto os outros recebem
no-repeat, o do #geral recebe repeat-y, pois assim, a cada conteúdo,
ele irá se repetir, não tendo o menos perigo, limitação
de conteúdo, altura, etc.

Com isso finalizamos o primeiro exemplo de layout
com canto arredondado, utilizando apenas três imagens.

Cantos arredondados com quatro imagens.
(Ver
On-line):

body { text-align: center;
} /* deixando o alinhamento do body centralizado
*/

#geral {
width: 530px; /* definindo 530px para a
largura do div */
margin: auto; /* colocando auto, para que
o #geral fique de acordo com o alinhamento do body, ou seja, centralizado
*/
text-align: left; /* definindo o alinhamento
do texto da div para esquerda, já que a do body está
center */
background-color: #4D906F; /* definindo
um verde escuro para a cor de fundo do div */
}

#topo {
background: #4D906F url(“cantoDS.gif”) no-repeat top
right; /* definindo uma imagem de background
para o topo, alinhada à direita e grudada no topo */
height: 20px; /* definindo altura de 20px
para o topo, para que o background seja visualizado corretamente
*/
}

#conteudo {
padding: 0 20px; /* definindo padding de
0 para a base e topo e 20px para as laterais para que o conteúdo
não cole nas extremidades */
font: 8pt Verdana; /* definindo a fonte
do texto para Verdana tamanho 8pt */
}

#rodape {
background: #4D906F url(“cantoDI.gif”) no-repeat top
right; /* definindo uma imagem de background
para o rodapé, alinhada à direita e grudada no topo
*/
height: 20px; /* definindo altura de 20px
para o rodapé, para que o background seja visualizado corretamente
*/
clear: both; /* definindo o clear para futuras
atualizações que o conteúdo pode ter, com
divs possuindo floats não interfira no rodapé */

}

alt="" />

conteúdo

alt="" />

Veremos, neste exemplo, uma versão bem simples
e facílima de usar. No início pode ser meio chatinho
pra entender um pouco, mas depois que entende o funcionamento
fica fácil, fácil. Você precisará de
quatro imagens, praticamente idênticas, a única mudança
é o ângulo das imagens. Faça
o download das imagens clicando aqui .

Neste exemplo utilizaremos apenas quatro divs também,
na mesma estrutura do exemplo anterior, mas com algumas modificações
e adições no código como podemos ver acima.
Mudei a altura do #topo e #rodape para 20px, lembrando que o valor
da altura deve ser o valor da altura da imagem, senão pode
dar problema. Coloquei o text-left no #geral para que todos os
outros divs dentro do #geral alinhem os textos à esquerda.
Uma das partes mais importantes, o background do #topo e #rodape,
que são praticamente idênticos, mudando somente o
nome. Mas a cor de fundo e o posicionamento são de extrema
importância. A cor de background deve ser a mesma cor da
imagem que vai estar no fundo.

Prestem atenção que alinhei o background
à direita e no topo. Para assegurar que fiquem lá
e dentro de cada um dos divs, tem uma tag chamando
a imagem respectiva a seu div. Por exemplo, a do topo recebe na
tag uma imagem cantoSE.gif, que é uma abreviação
de canto Superior Esquerdo, assim como no #rodape tem a imagem
cantoIE.gif, que seria canto Inferior Esquerdo.

Como o alinhamento de todas as divs está
à esquerda, então, automaticamente as imagens vão
ficar na esquerda, devido a isso coloquei as imagens de background
à direita, para que uma não sobreponha a outra.

Temos que chamar um detalhe, que as imagens têm
que ter a cor de fundo, a mesma cor de fundo do ou
da div “pai”, para que não tenha problemas
com as cores, por exemplo, o bom uma cor verde de
fundo, e a imagem ter um fundo cinza, ficará errado, pois
a imagem será um quadrado. Veja
o exemplo clicando aqui.

Uma vantagem é que basta retirar o width
do geral para que o site fique líquido. Clique
aqui para ver o exemplo . Expliquei mais detalhadamente este
pondo no artigo anterior. Clique
aqui para visualizá-lo .

Vimos que não tem mistério nenhum
criar esta versão, não é verdade? Resumidamente
é um div com uma imagem de background alinhada à
direita, enquanto temos uma imagem colada à esquerda para
completar o arredondamento e o div com a mesma cor de background
que a cor dos cantos. ;)

Cantos arredondados sem utilização
de imagens. ( Ver
On-line ):

span.topoRedondo, span.baseRedondo
{
display:block; /* deixando o display dos
span como block, já que o padrão é inline
e é necessário para visualização correta
*/
background: transparent; /* deixando o background
tranparente para que sempre que mudarmos a cor de fundo do
por exemplo, não seja necessário a mudança
aqui. */
}

span.topoRedondo span, span.baseRedondo
span {
display: block; /* deixando o display dos
span como block, já que o padrão é inline
e é necessário para visualização correta
*/
height: 1px; /* declarando a altura dos
spans poara 1px */
overflow: hidden; /* ocultando todo o conteúdo
que poderia ser visualizado no span. Todo espaço é
reduzido. Sem isso, no i.e. não é visualizado corretamente.
*/
background: #DEF6DD; /* definindo a cor
de fundo dos spans para verde. Sempre que quiser mudar a cor,
essa é a parte que deverá ser alterada. */
}

span.rum { margin:0 5px;
} /* Definindo a margem para 5px para as
laterais e 0 para base e topo para o primeiro span */
span.rdois { margin:0 3px; } /* Definindo
a margem para 3px para as laterais e 0 para base e topo para o
segundo span */
span.rtres { margin:0 2px; } /* Definindo
a margem para 2px para as laterais e 0 para base e topo para o
terceiro span */
span.rquatro { margin: 0 1px; height: 2px; } /*
Definindo a margem para 1px para as laterais e 0 para base e topo
para o quarto span e definido a altura para ele de 2px, a única
altura diferente dos demais.*/

.meioRedondo {
background: #DEF6DD; /* definindo a cor
de fundo dos spans para verde. Sempre que quiser mudar a cor,
essa é a parte que deverá ser alterada. (Sempre
deixar a mesma cor dos spans acima) */
color: #000; /* definido a cor preta para
o texto */
margin: 0; /* zerando a margem */
padding: 5px 15px; /* definindo padding
de 5px para a base e o topo e 15px para as laterais, para que
o conteúdo não fique colado nas bordas. */
}

Recebi alguns e-mails, várias perguntas,
não só aqui, como no fórum também,
de como criar divs com cantos arredondados sem o auxílio
de imagens. Há várias vantagens na utilização
deste modelo, pois vocês não dependem de imagens
para formá-la e, com isso, muito mais fácil de,
por exemplo, mudar a cor, etc. Logicamente que tem suas limitações,
que falarei mais no final do artigo.

Podem perceber a diferença no div topoRedondo
pro baseRedondo? As classes se invertem, no topo aparece rum,
rdois, rtres e rquatro, enquanto na base fica rquatro, rtres,
rdois e depois rum. E são exatamente esses spans que fazem
a “mágica” do arredondamento. É apenas
uma “ilusão óptica”. Pense você
criando no Photoshop, por exemplo, um quadrado arredondado, mas
sem o anti-aliasing. Se você criar um quadrado grande, você
verá a pixelização do quadrado, mas se você
fizer um quadrado bem pequeno, você nem perceberá
direito isso. Veja
o exemplo clicando aqui . É como funciona com as fontes
também.

Experimente escrever um texto no seu html com uma
fonte tamanho 10pts, o texto aparecerá sem problemas nenhum,
mas coloque 34pts e ficará um tamanho gigante e com alguns
serrilhados por não possuir um anti-alias. Veja
o exemplo clicando aqui .

Veja que defini as margens para as laterais e não
somente para um dos lados. Senão o site ficaria com somente
um dos lados arredondado. Clique
aqui para ver o exemplo. Ou seja, como o primeiro span tem
5px de margem nas laterais, ele ficará 5px afastado do
#geral, que é seu “pai”, o segundo, com 3px
nas laterais, ficará 3px afastado e assim por diante. Se
nós colocarmos 1px de diferença para cada span,
ficaremos com um div com uma diagonal ao invés do arredondado.
Clique
aqui para ver um exemplo . Como tem poucos spans, fica quase
imperceptível, parecendo até arredondado, mas tente
colocar mais spans, ficará mais visível. Clique
aqui para ver o exemplo.

Tem um blog explicando muito bem o funcionamento
desse artifício, com imagens, etc. Baseei-me um pouco neste
post, mas fiz algumas mudanças, melhorias no código.
Clique
aqui para ver o post . Ele utilizou a tag , utilizei
a tag . Tem um exemplo em outro blog, que também
utiliza . Clique
aqui para visualizar.