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é */
}

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.

Não tem muito mistério, só deixei o display: block nos spans, para que eles deixassem de ficar inline sempre quebrar linha, depois tirei a cor de fundo dos span baseRedondo e topoRedondo. O div meioRedondo não tem mistério nenhum, coloquei um padding, logicamente a mesma cor de fundo dos spans do topo e base para ele, senão teremos uma diferença de cor e não é o que desejamos. Nos spans topoRedondo e baseRedondo eu coloquei também o overflow: hidden, que faz com que não contenha nenhum conteúdo dentro desses span, que fiquem invisíveis. Normalmente não precisaria desta linha, mas o i.e. coloca espaços, mesmo sem conteúdo, parece que ele renderiza os espaços também, coisas do nosso querido i.e.

Vantagens x Desvantagens

Como tudo que existe na vida, temos pontos negativos e positivos para cada um dos exemplos. Listarei alguns dos principais pontos e cabe agora a vocês, decidirem qual a melhor opção. Varia de caso a caso.

Vantagens

Três imagens:

- Você pode colocar bordas nas curvas, nas imagens, sem perda de qualidade;
- Adicionar sombras nas imagens;
- Código bastante reduzido;
- Visual mais rico.
- Variação de angulação dos arredondamentos;

Quatro imagens:

- Possibilidade de fazer com sites líquidos facilmente;
- Bem simples e rápido para futuras alterações, precisando somente mexer no CSS;
- Código reduzido;
- Variação de angulação dos arredondamentos;

Sem imagens:

- Possibilidade de fazer com sites líquidos facilmente;
- Para modificações, basta apenas modificar o CSS, sem precisar editar imagens;
- Como não utiliza imagens, site em geral fica mais leve;

Desvantagens:

Três imagens:

- Limitação a layouts fixos;
- Para futuras alterações, não basta somente o css, como modificar em um programa a imagem;
- Mais peso, pois as imagens geralmente são mais pesadas que os outros exemplos;

Quatro imagens:

- Para futuras alterações, não basta somente o CSS, mas modificar a imagem em um programa;
- Limita a somente utilizar fundo com cores somente, sem bordas, sombras, etc;

Sem imagens:

- Limita a somente utilizar fundo com cores somente, sem bordas, sombras, etc;
- Código um pouco mais sujo, com um pouco mais de tags;
- Falta do anti-alias na visualização dos arredondamentos;

Existem outras vantagens, desvantagens, mas que acabam se enquadrando nestes pontos citados. No início pode ser um pouco complicado entender o funcionamento de algumas dessas utilizações, mas depois de uma prática, modificações, vocês acabam entendo legal.

Bom, finalizo aqui a seqüência dos artigos “Posicionamentos & Layouts”. Espero ter ajudado o pessoal e que tenha englobado as principais dificuldades no início da criação dos layouts webstandards. No próximo artigo, falarei sobre “Reciclagem de CSS”, assunto que foi bastante solicitado, não só por e-mail, quanto no fórum do iMasters. Tentarei abordar ao máximo, a economia que pode ser feita no CSS. Temos por aí na internet alguns sites que fazem isso, mas creio que para o desenvolvedor, é bom saber o porquê disso e não somente fazer. Vai que você está em casa, sem internet e está terminando o site... E aí, como que fica? Espera a internet voltar? Não seria melhor saber a lógica disso?

Caso tenham alguma dúvida, é só entrar em contato, me mandar um e-mail, sinal de fumaça, qualquer coisa. No que puder ajudar, estarei ajudando, assim como no meu blog.

Fico por aqui. Aquele abraço!